2

以前我开发了一个像这样的点页指示器：

const [sliderState, setSliderState] = useState({currentPage: 0});
const setSliderPage = (event) => {
const {currentPage} = sliderState;
const {x} = event.nativeEvent.contentOffset;
const indexOfNextScreen = Math.floor(x / width);

if (indexOfNextScreen !== currentPage) {
  setSliderState({
    ...sliderState,
    currentPage: indexOfNextScreen,
  });
}
};

const {currentPage: pageIndex} = sliderState;

 <SafeAreaView style={{flex: 1}}>
    <ScrollView
      style={{flex: 1}}
      horizontal={true}
      scrollEventThrottle={16}
      pagingEnabled={true}
      showsHorizontalScrollIndicator={false}
      onScroll={(event) => {
        setSliderPage(event);
      }}>
      <View style={{width, height}}>
        <Component1  />
      </View>

      <View style={{width, height}}>
        <Component2 />
      </View>

      <View style={{width, height}}>
        <Component3 />
      </View>
    </ScrollView>
    <View style={styles.paginationWrapper}>
      {Array.from(Array(3).keys()).map((key, index) => (
        <View
          style={[
            styles.paginationDots,
            {opacity: pageIndex === index ? 1 : 0.3},
          ]}
          key={index}
        />
      ))}
    </View>
  </SafeAreaView>

相反，现在我想通过导航来实现这一点，以便每个屏幕都在选项卡导航器堆栈中分开，而不是呈现出具有多个组件的单个屏幕：

const SwipeTabNavigator = () => {
return (
  <Tab.Navigator>
    <Tab.Screen name="Component1" component={Component1} />
    <Tab.Screen name="Component2" component={Component2} />
    <Tab.Screen name="Component3" component={Component3} />
  </Tab.Navigator>
);
};

如果这有任何意义：D，任何建议表示赞赏

4

0 回答 0