时间戳

首页 > 解决方案 > 如何使用 react-native 创建动态抽屉菜单导航

react-native - 如何使用 react-native 创建动态抽屉菜单导航

问题描述

我想使用 react-native 创建一个动态抽屉菜单导航。所有菜单项都从 json 文件中列出。

提前致谢！

标签： react-nativereact-native-navigation

解决方案

考虑到 boostrap：

render() {
    return (
        <div>
            { this.state.dynamicDrawer
                &&
                    <div className="btn-group-vertical" data-toggle="buttons">
                    <button type="button" className="btn btn-primary">Button</button>
                    <button type="button" className="btn btn-primary">Button</button>
                    <button type="button" className="btn btn-primary">Button</button>
                    <button type="button" className="btn btn-primary">Button</button>
                    <button type="button" className="btn btn-primary">Button</button>
                    <button type="button" className="btn btn-primary">Button</button>
                    </div>
            }
        </div>
)
}

然后在打开关闭时更改状态或以不同方式切换它，在这里你应该为 btn-group-vertical 添加一个类，使整个东西固定在左上角 100% 高度和一些填充或任何你想要的东西。

要使列表动态包括

this.state.buttons.map(button => { return (<button type="button" className="btn btn-primary">{button}</button>)})

这里是原生的一些信息：https ://facebook.github.io/react-native/docs/drawerlayoutandroid

render: function() {
  var navigationView = (
    <View style={{flex: 1, backgroundColor: '#fff'}}>
        { 
        this.state.dynamicTexts.map(dynamicText => { return (
          <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>{]{dynamicText}</Text>
        )}
        }
    </View>
  );
  return (
    <DrawerLayoutAndroid
      drawerWidth={300}
      drawerPosition={DrawerLayoutAndroid.positions.Left}
      renderNavigationView={() => navigationView}>
      <View style={{flex: 1, alignItems: 'center'}}>
       <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>Hello</Text>
       <Text style={{margin: 10, fontSize: 15, textAlign: 'right'}}>World!</Text>
      </View>
</DrawerLayoutAndroid>
  );
},

方法 openDrawer()

openDrawer();

打开抽屉。

关闭抽屉（）

closeDrawer();

我相信您可以使用这些组件一起构建它:)

祝你好运！

推荐阅读