在 React Navigation 中将道具传递给自定义抽屉导航器

Question

在 React Navigation 中将道具传递给自定义抽屉导航器

Ame*_*mza 4 javascript react-native react-navigation

在反应导航抽屉菜单中。我想显示处于我的主要组件状态的用户名“John Doe” 我'Router'如何将 CustomDrawerContentComponent 传递给它。

额外信息：我从 componentDidMount 中的 AsyncStorage 获取此名称

这是我的代码

export default class Router extends Component {
  constructor(props) {
    super(props);
    this.state = {
      employeeName: "John Doe" //<-----How to pass this name to CustomDrawerContentComponent????
    };
  }

  render() {
    return <MyApp />;
  }
}

const MyApp = DrawerNavigator(
  {
    Home: {
      screen: Home
    },
    History: {
      screen: History
    },
    AddDetails: {
      screen: AddDetails
    }
  },
  {
    initialRouteName: "Home",
    drawerPosition: "left",
    contentComponent: CustomDrawerContentComponent,
    drawerOpenRoute: "DrawerOpen",
    drawerCloseRoute: "DrawerClose",
    drawerToggleRoute: "DrawerToggle",
    contentOptions: {
      activeTintColor: "#EF4036"
    }
  }
);

const CustomDrawerContentComponent = props => (
  <Container>
    <Header style={styles.drawerHeader}>
      <Body style={styles.container}>
        <Image
          style={styles.drawerImage}
          source={{
            uri: "http://themes.themewaves.com/nuzi/wp-content/uploads/sites/4/2013/05/Team-Member-3.jpg"
          }}
        />
        <Text style={styles.drawerText}>**How get the name here?**</Text>
      </Body>
    </Header>

    <Content>
      <DrawerItems {...props} />
    </Content>
  </Container>
);

Run Code Online (Sandbox Code Playgroud)

Answer 1

Sai*_*ili 5

您可以使用 screenProps：

<MyApp
  screenProps={{employeeName: this.state.employeeName}}
/>

Run Code Online (Sandbox Code Playgroud)

然后在您的自定义 contentComponent 中使用它：

contentComponent:(props)=>(
  <View>
    <Text>{props.screenProps.employeeName}</Text>
    <DrawerItems {...props} />
  </View>
)

Run Code Online (Sandbox Code Playgroud)

这是你的问题的答案。但首先，我不建议将您的顶级组件用于此类业务逻辑。仅用于导航。

并在此处查看我的答案：Customizing Drawer

我建议您按照我在回答中的描述创建一个 Redux 连接的自定义抽屉。如果您不知道如何使用 Redux，我绝对建议您学习它。随着应用程序的增长，您将需要它。

归档时间：	7 年，5 月前
查看次数：	8199 次
最近记录：	7 年，5 月前