Question

当我单击平面列表中的一个项目时，我试图导航到另一个屏幕。我是新蜜蜂。我尝试使用堆栈导航器，但无法做到这一点。停留了三天。我正在使用自定义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>

        );
    }
}

}

CustomListview.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;

Answer 1

当您从一个屏幕导航到另一屏幕时，只需传递值，如下所示。

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

您可以将上述代码放入 TouchableHighlight 的 onPress 中。并将数据发送到下一个屏幕。

进入下一个屏幕，您可以访问以下数据：

let data = this.props.navigation.state.params.data

Answer 2

将此添加到您的FlatList：

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

然后在目标屏幕中接收数据：

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

不要忘记在App.js的导航器中包含destinationScreen：

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

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

2 个答案: