Question

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

使用“ @ react-navigation / drawer”：“ ^ 5.4.0”，

App.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从App.js传递给DrawerContent.js？在上述代码段中被视为 GET_URI_FROM_App.js 和 GET_USERNAME_FROM_App.js

Answer 1

您可以使用此：

请告诉我是否效果很好。

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

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

1 个答案: