react-native - 用户定义的组件未在 react-native 中导致其他屏幕

Question

我有一个包含 Tile 的用户定义组件，我正在使用此组件使用 FlatList 填充第一个屏幕，当我使用导航道具单击 Tile 时尝试移动到下一个屏幕时出现问题。

尝试使用 this.props.navigation.navigate('next_screen') 但无法移动并得到错误 undefined is not an object（评估 '_this.props.navigation.navigate'）

first_screen

<FlatList
                data={[{key: 'a', imgSrc: require('./image.jpg')}]}
                renderItem = {({item}) => <ImageContent sourceImage = { item } /> }
            />

ImageContent

export default class ImageContent extends React.Component {
_toPriceLayout = () => {
 this.props.navigation.navigate('next_screen')
}
render() {

        return (
            <View style = {styles.content} >
                    <TouchableOpacity >
                        <Tile
                            imageSrc = {this.props.sourceImage.imgSrc}
                            title = {this.props.sourceImage.key}
                            onPress = {() => this._toPriceLayout()}
                        />
</TouchableOpacity>
            </View>
 )
    }
}

单击 ImageContent 时，它应该导航到 next_screen。

标签： react-nativereact-navigationreact-props