时间戳

首页 > 解决方案 > 如何使用 React Hooks（useState 等）在 React Native 中创建图像幻灯片（水平）？

reactjs - 如何使用 React Hooks（useState 等）在 React Native 中创建图像幻灯片（水平）？

问题描述

如何创建自动定时幻灯片（水平）。

标签： reactjsreact-native

解决方案

使用此库，您可以创建幻灯片“react-native-image-slider-box”工作示例：https ://snack.expo.io/@msbot01/d5a028

    export default class App extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          images: [
            "https://source.unsplash.com/1024x768/?nature",
            "https://source.unsplash.com/1024x768/?water",
            "https://source.unsplash.com/1024x768/?girl",
            "https://source.unsplash.com/1024x768/?tree"
          ]
        };
      }
      render() {
        return (
          <View style={styles.container}>
            <SliderBox
              autoplay={true}
              circleLoop={true}
              images={this.state.images}
              onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}
              currentImageEmitter={index => console.warn(`current pos is: ${index}`)}
            />
          </View>
        );
      }
    }

推荐阅读