滑动到下一个屏幕（无限）

Question

我的应用中有一个日历部分，我希望能够向右或向左滑动以转到第二天或前一天。

我知道您可以使用 React Navigation 中的 createMaterialTopTabNavigator 来执行类似的操作，但我不确定它是否适用于这种特定场景（我将拥有无限数量的屏幕并且无法预定义它们）。

我还考虑使用react-native-gesture-handler 的Swipeable 组件在左/右滑动时导航到第二天/前一天屏幕，但我不确定这是否是解决此问题的最简单/最佳方法。

Answer 1

如您所述，您可以使用Tabs 或Swipable。还有一些其他选项，例如使用 <ifaram> 或 <WebView> 并使用 Web URL 而不是 RN 组件，但它可能很棘手且难以操作。

作为一个简单的解决方案，您可以使用carousels 而不是使用多个screen 定义导航。这很简单。假设您的屏幕是图片库中的一张图片，您可以向左/向右滑动。

有很多库，其中最好的一个是：react-native-snap-carousle

看看它的例子：

import Carousel from 'react-native-snap-carousel';
 
export class MyCarousel extends Component {
 
    _renderItem = ({item, index}) => {
        return (
            <View style={styles.slide}>
                <Text style={styles.title}>{ item.title }</Text>
            </View>
        );
    }
 
    render () {
        return (
            <Carousel
              ref={(c) => { this._carousel = c; }}
              data={this.state.entries}
              renderItem={this._renderItem}
              sliderWidth={sliderWidth}
              itemWidth={itemWidth}
            />
        );
    }
}

因此您可以将屏幕/页面作为_renderItem 传递给Carousel