Question

我试图在抽屉上添加一个注销按钮，所以我使用contentComponent来单独自定义创建注销（不是其他抽屉菜单）。因此，我创建了一个类并尝试接收DrawerItems，但它表示未定义道具。请帮助。

我的代码自定义组件：

 class DrawerComponent extends Component {
constructor(props) {
    super(props)
    console.log(this.props)
  }

render () {
    return (
        <View style={{flex:1}}>
            <SafeAreaView forceInset={{ top: 'always', horizontal: 'never' }}>
                <DrawerItems {props.children} />
                <TouchableOpacity onPress={() => console.log("Pressed")}>
                    <Text>
                    Logout
                    </Text>
                </TouchableOpacity>
            </SafeAreaView>
        </View>
    );
  }
 };

我的抽屉选项：

 const DrawerNavigator = createDrawerNavigator({
Dashboard: {
  screen: AppStackNavigator,
  navigationOptions: {
    drawerLabel: "Home",
  }
},
Training: {
  screen: Training,
  navigationOptions: {
    drawerLabel: "Training"
  }
},
RoutePlan: {
  screen: RouteCalendar,
  navigationOptions: {
    drawerLabel: "Route Plan"
  }
},
Logout: {
  screen: StoreList,
  navigationOptions: {
    drawerLabel: "Logout"
  }
}
},
{
contentOptions: {
  activeTintColor: '#127CC1',
},
contentComponent: props => <DrawerComponent {...props}/>,
drawerOpenRoute: 'DrawerOpen',
drawerCloseRoute: 'DrawerClose',
drawerToggleRoute: 'DrawerToggle',
navigationOptions : ({navigation}) => {
  const { routeName } = navigation.state.routes[navigation.state.index];
  const headerTitle = routeName;
  return {
      headerTitle,
      headerLeft: (
        <Icon name="md-menu" style={{ marginLeft: 10 }} 
        onPress={() => navigation.toggleDrawer()}
        />
      )
    }
  }
}
);

在我的customComponent页面上出现错误。请帮助我度过难关！

Answer 1

在render的{{1}}方法中，您正在调用DrawerComponent。在这种情况下，props.children尚未在render方法中定义。您可以在render方法的开头用props这样的行来定义它，也可以只调用let props = this.props而不是裸露的this.props。

如果您改用功能组件，则无需从props获取props，而只需将其作为功能组件的参数即可。

this

在反应导航中未在contentComponent上定义道具

1 个答案: