个人中心
文章发布
退出
作者热门文章
- iOS/Objective-C 元类和类别
- objective-c - -1001 错误，当 NSURLSession 通过 httpproxy 和/etc/hosts
- java - 使用网络类获取 url 地址
- ios - 推送通知中不播放声音
24
4
在 react 抽屉导航菜单中。我想显示我的主要组件 'Router' 状态下的用户名 'John Doe' 我如何将它传递给 CustomDrawerContentComponent。
Extra Info: I'm getting this name from AsyncStorage in componentDidMount
这是我的代码
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>
);
最佳答案
你可以使用 screenProps:
<MyApp
screenProps={{employeeName: this.state.employeeName}}
/>
然后在您的自定义 contentComponent 中使用它:
contentComponent:(props)=>(
<View>
<Text>{props.screenProps.employeeName}</Text>
<DrawerItems {...props} />
</View>
)
这是您问题的答案。但首先，我不建议将您的顶级组件用于此类业务逻辑。仅将其用于导航。
在这里查看我的答案:Customizing Drawer
我建议您按照我在回答中的描述创建一个连接 Redux 的自定义抽屉。如果你不知道如何使用 Redux，我绝对建议你学习它。随着应用程序的增长，您将需要它。
关于javascript - 在 React Navigation 中将 Prop 传递给自定义抽屉导航器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51580797/
24
4
0
我是 React Native 的新手，目前正在研究 React Native Navigation Docs 。我想知道:navigation.push() 和 navigation.navigat
来自 this和 this , 我了解到 navigation.navigate() 之间存在有意义的差异和 navigation.push() .尽管如此，我仍然想知道我是否可以使用 navigat
我正在使用 react-navigation 3.6.1 和 react-native-camera 2.2.2。当我拍照时，进入下一个屏幕的按钮在第一次按下时没有任何作用。必须按多次 这是针对 io
androidx.navigation:navigation-ui 和 android.arch.navigation:navigation-ui-ktx 有什么区别？ 当我在我的 gradle 中使
使用 TypeScript 时，react-navigation 中发生的一个常见错误是: Argument of type 'string' is not assignable to paramet
我有一个使用 React Native 的应用程序，我正在使用 react-navigation (5.2.9)。 我构建了一个 Stack.Navigator，我有我的屏幕，但我希望页脚组件在外面，
我有一个组件在 NavigationContainer 组件内但在 Stack Navigator 之外。我能知道组件中的当前路由是什么吗？我不能使用 useRoute Hook ，因为它出错了: C
关闭。这个问题需要更多 focused .它目前不接受答案。 想改进这个问题？更新问题，使其仅关注一个问题 editing this post . 3年前关闭。 Improve this questi
我正在学习 react-native 导航 https://reactnavigation.org/docs/intro/ 。我在那里的例子中看到 class HomeScreen extends R
我在我的 native 项目中使用 eslint airbnb。如果我没有验证 Prop ，特别是来自 react-navigation 的 Prop ，eslint 会抛出错误 linting .
在我的应用程序中，我有 6 个不同的页面。 有 1 个页面称为“收藏夹页面”，其中列出了用户选择的收藏夹。它们由一列显示，该列使用来自另一个类的列表。列表代码如下: List favoriteCo
我在 react 导航问题部分看到很多人使用 this.props.navigation.dispatch 以编程方式导航。是否有任何特定原因或用例需要在 this.props.navigation.
我在 vue.js 中开始了一个新元素。我添加了导航栏。有一次，我注意到控制台中有问题: Audit usage of navigator.userAgent, navigator.appVersio
首先，是的，我知道有很多与此问题相关的答案，但我发现了这种在 react-native 0.60 中进行导航的特定方法，问题是，我还没有弄清楚，而且我不想刮掉这个导航方法来测试不同的方法，这是导航文件
react 导航 5 我在 TabNavigator 内部构建了一个 StackNavigator，并且主屏幕和其他屏幕之间的导航正在工作。但问题是，当我从 Tab2 移动到 Tab1 时，我希望 T
我正在尝试在 react-native with expo 中使用 react-navigation-redux-helpers 将 redux 与 react-navigation 集成。但是，尽管
我正在尝试使用最新的 react-navigation 版本运行我的应用程序但无法正常工作。也尝试使用此解决方案 ( Invariant Violation: The navigation prop
我正在尝试使用 React Navigation 和 StackNavigator 在我的应用中导航。 我有一个带有 onPress={() => navigate('DetailsScreen'
我在我的应用程序中使用 react 导航。如果我从 screen A 导航到 Screen B，如果转换完成，我如何获得一些反馈。 最佳答案 从 'react-native 导入 { Interact
我遵循的是身份验证流程 (https://reactnavigation.org/docs/en/auth-flow.html) 上的 React 导航指南，但略有不同。我在 LoginScreen
我是一名优秀的程序员,十分优秀！