如何在项目点击自定义平面列表时将数据发送到其他屏幕

问题描述 投票:-1回答:2

当我点击平面列表中的一个项目时,我正试图导航到另一个屏幕。我是新蜜蜂。我尝试使用堆栈导航器,但无法做到这一点。它被困3天了。我正在使用自定义FlatList。平面列表工作正常,我可以点击平面列表的项目,并获得相应的项目数据。现在我想将该数据发送到另一个屏幕以在详细视图中显示该数据。我尝试了不同的方法,但我无法访问我使用onClick的道具

OrdersScreen.js

export default class OrdersScreen extends Component {

static navigationOptions = {
    drawerIcon: ({tintColor}) => (
        <Icon name="home" style={{fontSize: 24, color:tintColor}}/>
    )
};

constructor(props) {
    super(props);
    this.state = {
        load : false,
    }
}

componentWillMount() {    
    setTimeout(() => {
        this.setState({
            load : true,
        }); 
    }, 3000);
}

getData() {
    return [
      {
        key: 1, title: 'Albert Einstein',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
        image_url: 'http://vivirtupasion.com/wp-content/uploads/2016/05/DANI_PERFILzoomCircle.png'
      },
      {
        key: 2,
        title: 'Isaac newton',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
        image_url: 'http://3.bp.blogspot.com/-jd5x3rFRLJc/VngrSWSHcjI/AAAAAAAAGJ4/ORPqZNDpQoY/s1600/Profile%2Bcircle.png'
      },
      {
        key: 3, title: 'Albert Einstein',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
        image_url: 'http://vivirtupasion.com/wp-content/uploads/2016/05/DANI_PERFILzoomCircle.png'
      },
      {
        key: 4,
        title: 'Isaac newton',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
        image_url: 'http://3.bp.blogspot.com/-jd5x3rFRLJc/VngrSWSHcjI/AAAAAAAAGJ4/ORPqZNDpQoY/s1600/Profile%2Bcircle.png'
      },
      {
        key: 5, title: 'Albert Einstein',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
        image_url: 'http://vivirtupasion.com/wp-content/uploads/2016/05/DANI_PERFILzoomCircle.png'
      },
      {
        key: 6,
        title: 'Isaac newton',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
        image_url: 'http://3.bp.blogspot.com/-jd5x3rFRLJc/VngrSWSHcjI/AAAAAAAAGJ4/ORPqZNDpQoY/s1600/Profile%2Bcircle.png'
      },
      {
        key: 7, title: 'Albert Einstein',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
        image_url: 'http://vivirtupasion.com/wp-content/uploads/2016/05/DANI_PERFILzoomCircle.png'
      },
      {
        key: 8,
        title: 'Isaac newton',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
        image_url: 'http://3.bp.blogspot.com/-jd5x3rFRLJc/VngrSWSHcjI/AAAAAAAAGJ4/ORPqZNDpQoY/s1600/Profile%2Bcircle.png'
      },
      {
        key: 9, title: 'Albert Einstein',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
        image_url: 'http://vivirtupasion.com/wp-content/uploads/2016/05/DANI_PERFILzoomCircle.png'
      },
      {
        key: 10,
        title: 'Isaac newton',
        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore',
        image_url: 'http://3.bp.blogspot.com/-jd5x3rFRLJc/VngrSWSHcjI/AAAAAAAAGJ4/ORPqZNDpQoY/s1600/Profile%2Bcircle.png'
      },
    ]
}
render() {
    if(this.state.load){
        return (
            <View style={styles.container}>
                <Header style={{backgroundColor: 'white'}}>
                    <Left style={{position: 'absolute',  flexDirection: 'row', left: 0, marginLeft: 20}}>
                        <Icon name="menu" style={{marginTop:20}} onPress={()=>this.props.navigation.openDrawer()}/>
                        <Text style={styles.titleText}>  Orders!</Text>   
                    </Left>
                </Header>
                <View style={styles.contain}>
                    <CustomListview
                    itemList={this.getData()}
                    />
                </View>
            </View>
        );
    }else{
        return (
            <View style={styles.container}>
                <Header style={{backgroundColor: 'white'}}>
                    <Left style={{position: 'absolute',  flexDirection: 'row', left: 0, marginLeft: 20}}>
                        <Icon name="menu" style={{marginTop:20}} onPress={()=>this.props.navigation.openDrawer()}/>
                        <Text style={styles.titleText}>  Orders!</Text>   
                    </Left>
                </Header>
            <View style={{ flex: 1 , justifyContent: 'center' , alignItems: 'center' , backgroundColor : '#ffffff'}}>
                <ActivityIndicator color={'grey'}/>
            </View>
            </View>

        );
    }
}

}

自定义Listview.js

const CustomListview = ({ itemList }) => (
<View style={styles.container}>
    <FlatList
            data={itemList}
            renderItem={({ item }) => <CustomRow
                title={item.title}
                description={item.description}
                image_url={item.image_url}
                id={item.key}
            />}
        />

</View>);export default CustomListview;

CustomRow.js

const CustomRow = ({ id, title, description, image_url }) => (
<TouchableHighlight onPress={()=> {
    Toast.show(id + " Pressed", Toast.LONG);
}}>
    <View style={styles.container}>
        <Image source={{ uri: image_url }} style={styles.photo} />
        <View style={styles.container_text}>
            <Text style={styles.title}>
                {title}
            </Text>
            <Text style={styles.description}>
                {description}
            </Text>
        </View>
    </View>
</TouchableHighlight>);export default CustomRow;
javascript android react-native navigation react-native-flatlist
2个回答
1
投票

将其添加到FlatList:

onPress={() => {this.props.navigation.navigate('destinationScreen', {data: item.YourData}); }}

然后在destinationScreen中接收数据:

<Text>{this.props.navigation.state.params.data}</Text>

别忘了在app.js的导航器中包含destinationScreen:

 const AppNavigator = createStackNavigator(
        {
          Home: HomeScreen,
          Details: Screen1,
          destinationScreen: Screen2
        },
        {
          initialRouteName: "Home"
        }
      );

0
投票

您只需要在从一个屏幕导航到另一个屏幕时传递该值,如下所示。

let data = {} // You can add your data into it
this.props.navigation.navigate('SCREENNAME', {data})

你可以把上面的代码放到oncharess of TouchableHighlight上。并将数据发送到您的下一个屏幕。

进入下一个屏幕,您可以访问以下数据:

let data = this.props.navigation.state.params.data
© www.soinside.com 2019 - 2024. All rights reserved.