反应原生抽屉菜单：无法找到变量样式

Question

我正在尝试使用react-native-drawer-menu模块创建一个滑块菜单。安装模块后。得到错误无法找到变量样式。这是从示例中复制的代码：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { Provider } from 'react-redux'
import'../I18n/I18n.js';
import RootContainer from './RootContainer'
import createStore from '../Redux'
import Drawer from 'react-native-drawer-menu';
import {Easing} from 'react-native'; // Customize easing function (Optional)

// create store
const store = createStore()

export default class App extends React.Component {
  render() {
  // prepare your drawer content 
  var drawerContent = (<View style={styles.drawerContent}>
    <View style={styles.leftTop}/>
    <View style={styles.leftBottom}>
      <View><Text>Drawer Content</Text></View>
    </View>
  </View>);
  var customStyles = {
    drawer: {
      shadowColor: '#000',
      shadowOpacity: 0.4,
      shadowRadius: 10
    },
    mask: {}, // style of mask if it is enabled 
    main: {} // style of main board 
  };
  return (
    <Drawer
      style={styles.container}
      drawerWidth={300}
      drawerContent={drawerContent}
      type={Drawer.types.Overlay}
      customStyles={{drawer: styles.drawer}}
      drawerPosition={Drawer.positions.Right}
      onDrawerOpen={() => {console.log('Drawer is opened');}}
      onDrawerClose={() => {console.log('Drawer is closed')}}
      easingFunc={Easing.ease}
    >
      <View style={styles.content}>
        <Text>{Object.values(Drawer.positions).join(' ')}</Text>
        <Text>{Object.values(Drawer.types).join(' ')}</Text>
      </View>
    </Drawer>
  );
}
}

如果我从代码中删除变量，那么幻灯片菜单可以正常工作，但看起来非常糟糕。

你认为我应该自己创造菜单的样式，还是从某个地方导入？如果我必须创建它，我怎么知道它需要哪些参数？或者这是正常观点吗？

Answer 1

看起来您必须自己添加样式才能完全按照您的意愿查看抽屉内容。要实现它，您必须创建Stylesheet

您可以使用this回答来获取有关React Native Stylesheet属性的更多信息（它与css非常相似）

也许抽屉回购中的这个例子可能是helpful

干杯。