React Native listIem通过的道具

Question

我有一个问题，如何将一个屏幕的道具传递到另一个屏幕，以及如何使用“ React Native Elements”中的listItem显示道具。

首先，我将使用“添加朋友”表单粘贴屏幕代码：

const addFriend = ({ navigation }) => {
const [friend, setFriend] = useState('');
const [phone, setPhone] = useState('');

return (

    <View style={styles.container}>

        <Input
            placeholder='Friend Name'
            onChangeText={friend => setFriend(friend)}
            leftIcon={
                <Icon
                    name='user'
                    size={24}
                    color='grey'
                />
            }
        />
        <Input
            onChangeText={phone => setPhone(phone)}
            placeholder='Friend Phone Number'
            leftIcon={
                <Icon
                    name='phone'
                    size={24}
                    color='grey'
                />
            }
        />

        <Button
            title="Add Friend"
            onPress={() => {
                navigation.navigate('FriendList', { friend, phone })

            }}

        />
    </View>
);

}

第二，我将粘贴假定显示要添加的朋友列表的屏幕，在这里，我无法找到将道具从上方屏幕传递到列表的方法：

const list = [
    {
        name: '',
        avatar_url: 'https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg',
        subtitle: ''
    }
]


    const FriendList = ({ route, navigation }) => {
        const { friend } = route.params;
        const { phone } = route.params;
        return (

            <View style={styles.container}>
                  list.map((l, i) => (
            <ListItem
                 key={i}
                 leftAvatar={{ source: { uri: l.avatar_url } }}
                 title={l.name}
                 subtitle={l.subtitle}
                 bottomDivider
          />
        ))
      }


                {/* <Text>{JSON.stringify(friend)} {JSON.stringify(phone)}</Text> */}
            </View>
        );
    }

Answer 1

您可以在]中找到传递到第二个屏幕的参数>

let {friend, phone} = this.props.navigation.state.params;