首先显示单击的配置文件,然后在配置文件之间滑动以进行本机反应

时间:2019-11-19 14:32:14

标签: react-native

嗨,我如何首先向用户显示我单击过的内容,然后显示一个滑动器?我找不到逻辑。我有一个用户列表,当我单击一个用户列表时,它应该打开一个新组件,我们将在其中找到有关该用户的更多信息。然后,我想在描述的相同组件上的用户列表之间滑动吗?

这是我的用户个人资料组件和名单:

render () {
    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}>
            {this.state.items.map((item, key) => {
            return (
                <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>
)}
}
render() {
    GLOBAL.data = this.state.dataSource;
    //console.log(GLOBAL.data);
    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>
    )
 }

使用此代码,我只能在点击过的用户上滑动。其他用户未显示。

1 个答案:

答案 0 :(得分:1)

您可以打开模式,然后在全屏模式下使用类似react-native-snap-carousel的轮播来生成用例