React 导航 5:使用导航传递参数

时间:2021-01-07 18:01:42

标签: react-native react-navigation react-navigation-v5

我正在使用带有 react navigation5 的类组件,并且我有两个类:

DrawerComponent.js 类

export default class DrawerContent extends Component{   
constructor(props){
 super(props);    
}
render(){
 return(
    <View style={{flex:1}}>
        <DrawerContentScrollView {...this.props}>            
                <Drawer.Section style={styles.drawerSection}>
                    {
                          <DrawerItem 
                                icon={({color,size}) => (
                                 <Icon 
                                 name=""
                                 color={color}
                                 size={size}
                                 />
                                )}
                                label={menu.localizedTitle}
                                onPress = {() =>**{this.props.navigation.navigate("RecordList",{body :'abc' }**)}}/>)
        </Drawer.Section>             
            </View>
        </DrawerContentScrollView>         
    </View>
)}}

现在如果我必须访问另一个类中 body 的值,我该怎么做?

2 个答案:

答案 0 :(得分:1)

在您的 PROMOTED 组件中,您可以使用 RecordList

访问参数
route

在基于类的组件中:

const RecordList = ({navigation, route})=>{
  const {body} = route.params;
  console.log(body)
}

答案 1 :(得分:0)

我在 drawerNavigator 中使用 stackNavigator 所以我将不得不使用嵌套导航:

 this.props.navigation.navigate('RecordList', {screen:'Home',params :{ title: "Home"}})

和检索可以像上面 Ketan 的回答一样完成。