Как отправить данные на другой экран по щелчку товара в обычном плоском списке

Question

Я пытаюсь перейти к другому экрану, когда нажимаю на один из элементов в плоском списке.Я новая пчела.Я пытался использовать стек навигатор, но не смог этого сделать.это было 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>

        );
    }
}

}

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

Добавьте это в свой FlatList:

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

, затем получите данные на вашем получателе. Экран:

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

Не забудьте включить целевой экран в ваш навигатор в App.js:

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

Answer 2

Вам просто нужно передать значение при переходе с одного экрана на другой, как показано ниже.

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

Вы можете поместить указанный выше код в onPress из TouchableHighlight.И отправьте данные на следующий экран.

На следующем экране вы можете получить доступ к данным, как показано ниже:

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