javascript - 将对象从一个屏幕传递到另一个屏幕 | react native

Question

我想将我的数据:Info 从屏幕 WebServiceUse.js 传递到 Cellz.js。
我不知道该怎么做，我可以传递一个值但不能传递所有数据..
这是代码:

WebServiceUse.js:

export default class WebServiceUse extends Component {
    constructor(props) {
        super(props);
        this.state = ({
            Info: [],
            isLoading: true,
            Info1: [],
        })
    }

    componentDidMount() {
        fetch('https://*****', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ id: '1' })
        }).then((response) => response.json()).then((responseJson) => {
            this.setState({
                Info: responseJson.ed5aaf3d933385698d872d0a0d5d4f36,
                isLoading: false,
                Info1: this.Info,
            });
        }).catch((error) => {
            //console.error(error);
            alert(error);
            this.props.navigation.navigate('ScreenTwo');

        });
    }

    render() {
        return (
            <View style={styles.container}>
                {this.state.isLoading &&
                    <View>
                        <ActivityIndicator color="red" size='large' animating={this.state.isLoading} />
                    </View>
                }
                <ScrollView style={styles.welcome}>
                    {
                        this.state.Info.map((item) => {
                            return (
                                <TouchableOpacity onPress={ () => (this.props.navigation.navigate('ScreenSix', {Info: item.id}))}>
                                    <Text>{item.id}</Text>
                                    <Text>{item.date}</Text>
                                    <Text>{item.interlocuteur}</Text>
                                    <View style={styles.Separator} />
                                </TouchableOpacity>
                            )
                        })
                    }
                </ScrollView>
            </View>
        );
    }
}  

Cellz.js:

export default class Cellz extends Component {

    constructor(props) {
        super(props);}

    render() {
        return (
            <View flexDirection='column' style={styles.container}>
                <View flexDirection='row' style={styles.welcome}>
                    <Text>ID:   </Text>
                    <Text>{this.props.navigation.state.params.Info}</Text>
                </View>
                <View flexDirection='row' style={styles.welcome}>
                    <Text>Ticket ID:    </Text>
                    <Text>{this.props.navigation.state.params.Info}</Text>
                </View>
            </View>

        );
    }
}

我应该怎么做才能传递所有数据 Info ？

Answer 1

如果你愿意，你可以传递对象，

当前您正在执行以下操作，它只传递 item.id

<TouchableOpacity onPress={ () => (this.props.navigation.navigate('ScreenSix', {Info: item.id}))}>

如果需要，您可以传递 item 对象，或通过以下方式传递任何其他对象

<TouchableOpacity onPress={ () => (this.props.navigation.navigate('ScreenSix', {Info: item.id, item: item}))}>

然后在你的 Cellz.js

你可以这样得到它

render() {
  const item = this.props.navigation.getParam('item');

  return (
    ...
  );
}

查看 documentation有关更多信息。