как создать динамическое меню ящика c, используя реагирующее - PullRequest
Новая
       6

как создать динамическое меню ящика c, используя реагирующее

0 голосов
/ 11 января 2020

Я хотел бы создать динамическое c меню навигации в ящике с использованиемact-native. Все пункты меню перечислены в файле json.

Заранее спасибо!

1 Ответ

0 голосов
/ 11 января 2020

С учетом 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% и некоторые отступы или все, что вы пожелаете sh.

Чтобы сделать список динамическим c, включите 

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();

Я уверен, что с этими компонентами вы можете собрать его вместе:)

Удачи!

...