React Native Navigation - 绘制选项 - 添加开关答案

【问题标题】：React Native Navigation - Draw Options - Adding a switchReact Native Navigation - 绘制选项 - 添加开关
【发布时间】：2017-08-29 10:38:21
【问题描述】：

我正在使用https://reactnavigation.org/docs/intro/

我想在绘图中添加一个开关或切换 - 而不是指向另一个页面的链接。

我想看到的是，抽奖打开 - 然后显示一个切换开关以代替选项。然后，用户应该能够在不关闭平局的情况下打开和关闭它。

有人知道这是否可行吗？

【问题讨论】：

标签： javascript react-native react-navigation

【解决方案1】：

你可以使用 DrawerNavigator 中的 contentComponent 来为抽屉使用自定义的 React 组件。

{
  drawerWidth: 200,
  drawerPosition: 'right',
  contentComponent: props => <ScrollView><DrawerItems {...props} /></ScrollView>
}

contentComponent 可以是您可以编写的自定义 React 类，它包含您想要的任何内容。

提供自定义内容组件
您可以轻松覆盖 react-navigation 使用的默认组件：

import { DrawerItems } from 'react-navigation';

const CustomDrawerContentComponent = (props) => (
  <View style={style.container}>
    <DrawerItems {...props} />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

参考：https://reactnavigation.org/docs/navigators/drawer
自定义抽屉示例：https://developerlife.com/2017/04/15/navigation-and-styling-with-react-native/

【讨论】：