使用swiper在本机中渲染配置文件

Question

嗨，我有一个Home组件，其中有一个平面列表，其中显示了应用程序的所有用户以及一些伪信息，他们的年龄等信息。当我们单击某个用户时，它将转到另一个组件， UserProfil，我们可以获取有关用户的更多信息。我想实现一个刷卡器，让我在用户之间滑动。如何使用Home中UserProfil组件中的数据来启动刷卡器？

这是我的组成部分：

Home.js

class Accueil extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: false,
      refreshing: false,
      location: null,
      latitude:null,
      longitude:null,
      dataSource:[],
      error:null
    }
    setInterval(this.displayPosition.bind(this),3000)
    this.displayPosition = this.displayPosition.bind(this);
 }

getData(){
    fetch("someURL")
    .then(res => res.json())
    .then(res => {
      this.setState({
        dataSource: res
      });
    })
    .catch(error => {
      console.log("get data error:" + error);
    }),
    {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        lo: this.state.longitude,
        la: this.state.latitude,
      }),
    }
  }


  _displayDetailForUser = (idUser, name, photo, age, pratique, description, distance, Statut, localisation, principale ) => {
    //console.log("Display user with id " + idUser);
    this.props.navigation.navigate("UserProfil", { MembreId: idUser, Pseudo:name, Photo: photo, Age:age, Genre:pratique, Description:description,  Distance:distance, Statut:Statut, CP:localisation, Ville:principale });
  }
  render() {
    return (
      <SafeAreaView style={{ flex:1 }}>
        <View style={styles.main_container}>
          <FlatList style={styles.flatList}
          data={this.state.dataSource}
          extraData = {this.state}
          keyExtractor={(item, index) => item.MembreId}
          renderItem={(item) => <UserItem user={item} displayDetailForUser={this._displayDetailForUser} />}
          numColumns={numColumns}
          refreshing={this.state.refreshing}
          onRefresh={this.handleRefresh} />
        </View>
      </SafeAreaView>
    )
  }
}

和UserProfil

render () {

    const { user } = this.props;

    var colorConnected;
            if (this.props.navigation.getParam('Statut') === "ON") {
              colorConnected = "#1fbc26";
            }
            else if (this.props.navigation.getParam('Statut') === "OFF") {
              colorConnected = "#ff0303";
            }
            else {
              colorConnected = "#ffd200";
            }
    return (
         <Swiper showsPagination={false}>
                <ScrollView style = {styles.view_container}>
                    <View style={styles.photo}>
                      <ImageBackground source={{uri:this.props.navigation.getParam('Photo')}} style={{ width: '100%', height: '100%' }}>
                        <View style={styles.photo_content}>
                          <LinearGradient colors={['transparent', 'rgba(0,0,0,0.5)']} style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: 80 }} />
                          <View style={{ flexDirection: 'row', alignItems: 'center' }}>
                            <View>
                              <Text style={{ fontSize: 40, color:'white' }}>{this.props.navigation.getParam('Age')}</Text>
                            </View>
                            <View style={{ marginRight: 7, marginLeft: 7, backgroundColor: '#ffffff', width: 1, height: 39 }}></View>
                              <View style={{ flexDirection: 'column', flex:1 }}>
                                <View style={{ flexDirection: 'row' }}>
                                  <View style={[styles.bulle_presence, { backgroundColor: colorConnected } ]}></View>
                                  <Text style={{ fontSize: 18, fontWeight: '600', color:'white' }}>{this.props.navigation.getParam('Pseudo')}</Text>
                                </View>
                                <View style={{ flexDirection: 'row', justifyContent: 'space-between'}}>
                                  <Text style={{ fontSize: 15, color:'white' }}>{this.props.navigation.getParam('Distance')}</Text>
                                  <Text style={{ fontSize: 15, color:'white'}}>{this.props.navigation.getParam('Genre')}</Text>
                                </View>
                              </View>
                          </View>
                        </View>
               </ImageBackgroud>
           </View>
      </ScrollView>
  </Swiper>
)}
}

Answer 1

    https://github.com/react-native-community/react-native-viewpager

                            or

    https://github.com/alexbrillant/react-native-deck-swiper



  i hope is usefull for you