react-native - React Native：将参数传递给 Drawer.Navigator

Question

我可以传递道具，但由于道具是只读的，我如何在 App.js 和 DrawerContent.js 之间传递其他参数？请看下面的代码片段

使用 "@react-navigation/drawer": "^5.4.0",

应用程序.js：

 const Drawer = createDrawerNavigator();

 const DrawerRender = () => {
    return (
      <NavigationContainer>
        <Drawer.Navigator drawerContent={props => <DrawerContent {...props} />}>
          <Drawer.Screen name="Feed" component={Feed} />
        </Drawer.Navigator>
      </NavigationContainer>
    );
  }

  export default class App extends React.Component {

       constructor(props) {
          super(props);
          this.state = { 
              fonts_loaded: false,
              isLoggedin: false,
              userData: null,
              isImageLoading: false
          }
       }

     ...

     render() {
        if(this.state.fonts_loaded){
            if(this.state.isLoggedin && this.state.userData !== null){
                return (
                    <DrawerRender />
                );
            }
            return (
                <View style={styles.container}>
                    ...
                </View>
            );
        }
        return (<View></View>)
    }
}

抽屉内容.js：

export function DrawerContent(props) {

    return(
        <View style={{flex:1}}>
            <DrawerContentScrollView {...props}>
                <View style={styles.drawerContent}>
                    <View style={styles.userInfoSection}>
                        <View style={{flexDirection:'row',marginTop: 15}}>
                            <Avatar.Image 
                                source={{
                                    uri: <GET_URI_FROM_App.js>
                                }}
                                size={50}
                            />
                            <View style={{marginLeft:15, flexDirection:'column'}}>
                                <Title style={styles.title}><GET_USERNAME_FROM_App.js></Title>
    ...

如何将用户名和 uri 从 App.js 传递到 DrawerContent.js？在上面的代码片段中被视为GET_URI_FROM_App.js和GET_USERNAME_FROM_App.js

标签： react-nativereact-native-androidreact-navigationreact-native-ios

Answer 1

你可以使用这个：

请告诉我好不好用。

应用程序.js

const Drawer = createDrawerNavigator();

 const DrawerRender = ({ passProps }) => {
    return (
      <NavigationContainer>
        <Drawer.Navigator drawerContent={props => <DrawerContent {...props} {...passProps} />}>
          <Drawer.Screen name="Feed" component={Feed} />
        </Drawer.Navigator>
      </NavigationContainer>
    );
  }

  export default class App extends React.Component {

       constructor(props) {
          super(props);
          this.state = { 
              fonts_loaded: false,
              isLoggedin: false,
              userData: null,
              isImageLoading: false
          }

          this.passProps = {
            username: 'john',
            uri: 'doe',
          }
       }

     ...

     render() {
        if(this.state.fonts_loaded){
            if(this.state.isLoggedin && this.state.userData !== null){
                return (
                    <DrawerRender passProps={this.passProps} />
                );
            }
            return (
                <View style={styles.container}>
                    ...
                </View>
            );
        }
        return (<View></View>)
    }
}

抽屉内容.js

export function DrawerContent(props) {

    return(
        <View style={{flex:1}}>
            <DrawerContentScrollView {...props}>
                <View style={styles.drawerContent}>
                    <View style={styles.userInfoSection}>
                        <View style={{flexDirection:'row',marginTop: 15}}>
                            <Avatar.Image 
                                source={{
                                    uri: props.uri
                                }}
                                size={50}
                            />
                            <View style={{marginLeft:15, flexDirection:'column'}}>
                                <Title style={styles.title}>{ props.username }</Title>
    ...