react-native - contentComponent 不工作反应本机导航
问题描述
正如标题中所说, contentComponent 不起作用。我无法弄清楚为什么它没有在 contentcomponent 中呈现内容。
它显示了我在抽屉导航器中而不是它的屏幕 1 2 和注销。任何建议表示赞赏?路由.js
import React from 'react';
import {
createAppContainer,
createSwitchNavigator,
createStackNavigator,
createBottomTabNavigator,
createDrawerNavigator
} from 'react-navigation';
import { SideNavigation } from './SideNavigation';
export const SignedOut = createStackNavigator(
{
Login: {
screen: LoginForm,
navigationOptions: {
header: null
}
},
Register: {
screen: RegisterForm
},
VerifyPhone: {
screen: PhoneVerify,
navigationOptions: {
headerLeft: null
}
}
},
{
initialRouteName: "Login"
}
);
export const Tabs = createBottomTabNavigator({
Main: {
screen: createStackNavigator({
Main: Main
}),
},
Events: {
screen: createStackNavigator({
Events: Events
}),
},
Shop: {
screen: createStackNavigator({
Shop: Shop
}),
},
Profile: {
screen: createStackNavigator({
Profile: Profile
}),
},
});
export const Stack = createStackNavigator(
{
Drawer: {
screen: SideNavigation,
navigationOptions: {
header: null,
},
},
DefaultScreen: {
screen: Main,
}
}
);
export const createRootNavigator = (loggedin) => {
return createAppContainer(createSwitchNavigator(
{
SignedIn: {
screen: Stack
},
SignedOut: {
screen: SignedOut
},
},
{
//initialRouteName: loggedin ? "SignedIn" : "SignedOut"
initialRouteName: "SignedIn"
}
));
};
SideNavigation.js
import { createDrawerNavigator, SafeAreaView } from 'react-navigation';
import { ScrollView } from 'react-native-gesture-handler';
import { Text, Dimensions } from 'react-native';
import { Stack } from "./Routes";
export const SideNavigation = createDrawerNavigator(
{
home: Stack
},
{
contentComponent: (props) => {
return <Drawer {...props} >
<ScrollView>
<SafeAreaView
forceInset={{top: 'always', horizontal: 'never'}}
>
<Text
onPress={() => {
props.navigation.navigate('Screen1');
props.navigation.closeDrawer();
}}
>
Testing Side 1
</Text>
<Text
onPress={() => {
props.navigation.navigate('Screen2');
props.navigation.closeDrawer();
}}
>
Testing side 2
</Text>
</SafeAreaView>
</ScrollView>
</Drawer>
},
}
);
编辑:代码已更新。我现在收到一条错误消息,提示“home”必须是 React 组件。
解决方案
将您的自定义组件作为单独的组件文件提供,如下所示:
import Drawer from "./somewhere";
const Stack = createStackNavigator(
{
DefaultScreen: {
screen: Main,
}
}
);
const DrawerNavigator = createDrawerNavigator({
home: Stack <<<<this is an address of the stack navigator you should created above
}, {
contentComponent: (props) => {
return <Drawer {...props} /> <<<<Drawer
},
drawerPosition: 'right',
drawerType: 'slide',
drawerWidth: width * 0.8
}
)
更合乎逻辑和更清洁......但不要忘记给你的应用程序容器提供抽屉:
return createAppContainer(createSwitchNavigator(
{
SignedIn: {
screen: DrawerNavigato//not stack
},
SignedOut: {
screen: SignedOut
},
},
{
//initialRouteName: loggedin ? "SignedIn" : "SignedOut"
initialRouteName: "SignedIn"
}
));
推荐阅读
- javascript - 在 React 中使用 map() 时无法通过 API 调用访问数组数据
- node.js - API Gateway websockets - 函数正在发送两条消息
- apache-kafka - Kafka 如何处理与分区相关的键控消息
- javascript - 如何循环遍历数组
- python - 填写注册页面的“名字”字段
- racket - Racket - 从 2dlist 中添加或删除元素
- node.js - Next.JS:具有承诺的解析器在 SSR 上的 api-routes-server-and-client-test 中不起作用
- cocoa - 使用 NSUndoManager 从异步撤消注册重做操作
- algorithm - 无数据类型的快速排序算法
- ios13 - ios13在亮/暗模式之间切换最初没有反映在带有inputAccessoryView的显示键盘上