在onpress

Question

renderItemTop ({item}) {
    return (
        <TouchableOpacity
        onPress={()=>this.props.navigation.navigate('DetailUpMovie')}
            >
            <Card
            containerStyle={stylesTop.ImageCardStyle}
            image={{ uri: `${BASE_IMAGE_URL}original${item.poster_path}` }}
            imageStyle={{ width: CardWidthTop, height: CardHeightTop }}
            imageProps={{ borderRadius: 15, resizeMode:'stretch' }}
            />
        </TouchableOpacity>
    );
}

render () {
    const { data } = this.state;
    return (
        <View style={stylesTop.ViewTopstyle}>

            <View style={stylesTop.InnerViewstyle}>
                <Text style={stylesTop.TitleTopStyle}>Top Rated Movie</Text>
                <Button
                buttonStyle={stylesTop.btnStyle}
                title='More'
                titleStyle={stylesTop.btnTitleStyle}
                type='clear'
                />
            </View>

            <FlatList 
                data={data}
                renderItem={this.renderItemTop}

                keyExtractor={item => item.id}
                showsHorizontalScrollIndicator={false}
                horizontal={true}
                marginTop={5}
                marginLeft={10}
                marginRight={10}
                marginBottom={5}
            />
        </View>

    );
}

这是我要在renderitem功能中导航到其他屏幕的地方，但是当我按该项目进行导航时出现错误tis.props.navigation.navigate undefined不是另一个类中的对象，所以我将所有堆栈和bottomnavigator 请帮助

Answer 1

您可以通过以下方式将navigation道具传递给自定义组件：

  

您只需将导航道具传递给功能即可访问导航动作

const MyComponent = props => {
    const { item, navigation } = props

    return (
        <TouchableOpacity
        onPress={() => navigation.navigate('DetailUpMovie')}
            >
            <Card
            containerStyle={stylesTop.ImageCardStyle}
            image={{ uri: `${BASE_IMAGE_URL}original${item.poster_path}` }}
            imageStyle={{ width: CardWidthTop, height: CardHeightTop }}
            imageProps={{ borderRadius: 15, resizeMode:'stretch' }}
            />
        </TouchableOpacity>
    );
}

...

<FlatList 
  data={data}
  renderItem={({item}) => (
    <MyComponent item={item} navigation={this.props.navigation} />
  )}
  keyExtractor={item => item.id}
  showsHorizontalScrollIndicator={false}
  horizontal={true}
  marginTop={5}
  marginLeft={10}
  marginRight={10}
  marginBottom={5}
/>