每次滑动 Swiper 库都会更改组件的内容

Question

我是 React Native 的新手，对状态管理不是很熟悉。目前我正在使用 react-native-swiper 库来保存我的可滑动图像。每次滑动都会带我到下一张图片。下面的代码

Fish.js:

<Swiper style={styles.wrapper} height={10} horizontal={true} >
      <View style={styles.slide1}>
        <Image
          resizeMode="stretch"
          style={styles.image}
          source={require('../resource/images/AzureDamsel.png')}
        />
      </View>
      <View style={styles.slide2}>
        <Image
          resizeMode="stretch"
          style={styles.image}
          source={require('../resource/images/BicolourAngelfish.png')}
        />
      </View>
      <View style={styles.slide3}>
        <Image
          resizeMode="stretch"
          style={styles.image}
          source={require('../resource/images/ClownTriggerfish.png')}
        />
      </View>
 </Swiper>

我正在我的 App.js 中导入它，下面有一些文本组件，如下所示：

<View style={{ flex: 1 }}>
  <ImageBackground
    style={globalStyles.backgroundImage}
    source={require('./resource/images/bg1080.jpeg')}
  >
  <Fish />
  <Text> Fish 1</Text>
  <Text> Fish 2</Text>
  </ImageBackground>
</View>

但我希望每次滑动都能显示相应的文本。例如在图像 1 中，文本显示为 Fish 1，然后当我滑动图像并转到第二张幻灯片时，文本变为 Fish 2，依此类推。任何帮助将不胜感激。

Answer 1

您可以将活动幻灯片索引保持在状态，然后呈现该索引。

App.js

内部

const [activeIndex, setActiveIndex] = useState();

const onIndexChanged = (index) => setActiveIndex(index);

return (
  <View>
    <Fish
      onIndexChanged={onIndexChanged}
    />
    { activeIndex && <Text>`Fish ${activeIndex}`</Text> }
  </View>
)

在 Fish.js 内部，您需要将 onIndexChanged 属性传递给 Swiper。

const Fish = ({ onIndexChanged }) => (
  <Swiper onIndexChange={onIndexChanged}>
    // Rest of your code.
  </Swiper>
)

检查你的 Snack，我可以看到一些输出，但正如你所提到的，这不是你所期望的。

启动 activeIndex 状态变量为 0。

  const [activeIndex, setActiveIndex] = useState(0);

通过 onIndexChanged 属性将 setActiveIndex 直接传递给 Fish。现在您可以从 App.js

中删除不必要的 onIndexChanged 函数

<Fish onIndexChanged={setActiveIndex} />

更改您的字符串插值以仅呈现来自 fishMapping 的文本。因为 activeIndex 不再是未定义的，所以您不需要额外检查 (activeIndex &&)

<Text>{fishMapping[activeIndex]}</Text>

Here's 您的 Snack 的更新版本。

Answer 2

我查看了你提供的 snack，问题在 Fish.js 文件中。将 onIndexChange 替换为 onIndexChanged。更新后的代码：

const Fish = ({ onIndexChanged }) => (
  <Swiper onIndexChanged={onIndexChanged}>
    // Rest of your code.
  </Swiper>
)

Link更新零食：https://snack.expo.dev/BToSGo1z6

每次滑动 Swiper 库都会更改组件的内容

Changing content of a component with each swipe of Swiper Library

reactjs

react-native

react-state-management