React native：通过 2 个组件将图像路径作为参数传递

Question

我正在尝试通过 react-navigation 参数将图像路径向下传递到一个组件，并从该组件作为道具传递到第三个组件。

这是一个聊天应用程序，组件的结构是：

ChatsMain.js -->（点击SingleChat，导航时传递参数）--> SingleConversation.js --> Message

我可以将“名称”作为参数传递，但不能传递图像的 uri，甚至不能将其分配给变量。

我在 SingleChat 上看到的名称可以毫无问题地传递给对应的对话，但是当我传递图像时出现错误： '失败的道具类型：无效的道具source提供给Image。'

我希望它足够清楚，我认为这不是正确的方法，但我是新手反应原生！

ChatsMain.js

const imageNames = {
    juf: require('../assets/juf.png'),
    meester: require('../assets/meester.png'),
    groep: require('../assets/groep.png'),
    onderwerpen: require('../assets/onderwerpen.png')
}

export default class ChatsMain extends React.Component {
    render() {
        return (

                        <SingleChat
                            image={imageNames.juf}
                            backgroundColor={yellow}
                            borderColor={blue}
                            name='Juf Elsa'
                            onPress={() => this.props.navigation.navigate('SingleConversation', {name: 'Juf Elsa', image: imageNames.juf})}
                        />
)

SingleConversation.js

export default class SingleConversation extends React.Component {

    static navigationOptions = ({ navigation }) => {
        return {
            title: navigation.getParam('name', 'Chat'),
            headerStyle: [titleBar, { backgroundColor: yellow }],
            headerTitleStyle: [title, { color: blue }]
        }
    }
    render() {
        return (
            <View style={chatMainContainer}>
                    <ScrollView style={chatsContent}>
                        <Message image={({navigation}) => navigation.getParam('image', 'image')} />
                    </ScrollView>
            </View>
        );
    }
}

消息.js

export default class ReceivedFirst extends React.Component {

    render(
        ){
        return(
            <View style={textWithPicture}>
            <View style={[chatPhotoContainer, { borderColor: yellow }]}>
                <Image source={this.props.image} style={{ width: 70, height: 70}} />
.....
.....
)

Answer 1

您可以使用this.props.navigation.state.params 代替this.props.navigation.getParam

export default class SingleConversation extends React.Component {
 constructor(props) {
    super(props);
    this.state = {
      image: this.props.navigation.state.params.image
    };
  }
...
Message image={this.state.image} />

或 您需要从道具中获取导航。

    render() {
     const { navigation } = this.props
        return (
            <View style={chatMainContainer}>
                    <ScrollView style={chatsContent}>
                        <Message image={() => navigation.getParam('image', 'image')} />
                    </ScrollView>
            </View>
        );
    }