React Native: передача параметров в Drawer.Navigator

Question

Я могу передавать реквизиты, но поскольку реквизиты доступны только для чтения, как передать другой параметр между App. js и DrawerContent. js? Пожалуйста, ознакомьтесь с фрагментом кода ниже

Используя "@ Reaction-Navigation / Box": "^ 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>)
    }
}

DrawerContent. 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 из приложения. js в DrawerContent. js? Рассматривается как GET_URI_FROM_App. js и GET_USERNAME_FROM_App. js в приведенном фрагменте кода

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>)
    }
}

DrawerContent. 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>
    ...