Question

我在SectionListView.js中有这段代码：

class SectionListItem extends Component {
render(){
    return(
        <View>
            <TouchableHighlight onPress={()=>navigation.navigate('YoutubeScreen')} underlayColor='transparent'>
            <View style={styles.SectionListItem}>
                <MaterialIcons name='youtube-searched-for' size={20} style={styles.YtIcon}>
                </MaterialIcons>
                <View style={styles.Item}>
                    <Text style={{fontFamily:Fonts.OpenSans}}>{this.props.item.name}</Text>
                    <Text style={{fontSize:6,fontFamily:Fonts.OpenSans}}>{this.props.item.details}</Text>
                </View>
                <View style={styles.IconContainer}>
                    <MaterialIcons name='chevron-right' size={15} style={styles.IconChevron}>
                    </MaterialIcons>
                </View>
            </View>
            </TouchableHighlight>
        </View>
    );
}

}

我希望用户点击列表项，转到YoutubeScreen。此部分列表包含在源屏幕中：

export default class Source extends Component {
render() {

    return (

        <Container>
            <Header style={styles.Header}>
                <Left>
                    <Button transparent>
                        <Icon name='menu' onPress={()=>
                        this.props.navigation.navigate('DrawerOpen')}/>
                    </Button>
                </Left>
                <Body style={styles.Body}>
                    <Text style={{color:'#ffffff'}}>Source</Text>
                </Body>
                <Right />
            </Header>
            <Content style={styles.Content}>
                <SectionListView/>
            </Content>
        </Container>
    );
}

}

我的错误是“可以t find navigate variable" in section list.I don了解如何通过导航或导航。

Answer 1

您需要在navigation中传递component道具才能访问

<SectionListView navigation={this.props.navigation}/>

和

<TouchableHighlight onPress={()=> this.props.navigation.navigate('YoutubeScreen')}

或更好的方法是访问父组件中的导航

<强> SectionListItem.js

onPress={()=>this.props.navigate('YoutubeScreen')}

<强> Source.js

  <SectionListView navigate={this._navigate}/>

  // Outside of render
  _navigate = (screen) => this.props.navigation.navigate(screen)

带有节列表的React-Native导航

1 个答案: