如何修改抽屉导航器项

Question

在DrawerNavigatorItems文档中，它具有以下属性：

• items- 路由数组，可以修改或覆盖

它说你可以修改数组。

我该怎么做？

它没有解释什么是"路由数组"。只是字符串？一个对象？

我想做的一个例子是获取完整的数组并在最后添加一个额外的数组，类似于

items: [...items, someNewItem]

Answer 1

一种解决方案是定义我们的自定义组件。此外，我们可以利用 Redux 来管理状态。

摘自我创建的应用程序：

//The navigation part
const MainDrawer=createDrawerNavigator({
MainNavigation,
K:KChartViewScreen
},{
contentComponent:CoinDrawer,
edgeWidth:-1 //to disable gesture from bound open the drawer in unexpected screen. but you could do some work to enable it and without problem, I just handle in an easy way.
});

以下是CoinDrawer：

class CoinDrawer extends React.Component{
renderMarkets(){
...
}
render(){
return (
<View>

<ScrollView>
<SafeAreaView style={styles.container} forceInset={{ top: 'always', horizontal: 'never' }}>
{this.renderMarkets()}
</SafeAreaView>
</ScrollView>
</View>
)
}
function mapStateToProps(state){
return {
config:state.config,
crypto:state.crypto,
trade:state.trade
}
}
export default connect(mapStateToProps,{SetCurrentMarket})(CoinDrawer);

希望这能帮助你。

Answer 2

您可以在导航文件中传递抽屉导航项。您可以创建一个如下所示

import { createDrawerNavigator } from 'react-navigation-drawer'
const MainNavigator = createDrawerNavigator(
{
Main,
Landing,
},
{
contentComponent: Drawer,
},
)

我希望您了解我们可以制作不同类型的导航器，如switch、stack、drawer等。 在此之后，您可以在AppNavigator中调用您的抽屉导航器，如下所示

const AppNavigator = createStackNavigator(
{
MainNavigator,
Account,
Success,
},
{
initialRouteName: 'MainNavigator',
headerMode: 'none',
},
)

现在，无论您将在 MainNavigator 对象中插入什么路线，它都会显示在抽屉中。 可能有几种使用导航服务的方法，我用了这个。 希望这有帮助。