Question

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

谢谢！

Answer 1

考虑使用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（）

closeDrawer();

我确定可以使用这些组件一起构建它：）

祝你好运！

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

1 个答案: