1

我在我的应用程序开发中使用反应导航（第一次..）。我的建议是将主要且唯一的 StackNavigator 嵌套在 index.js 中编写的组件内，这样我就可以只编写一次抽屉和状态栏代码，并且导航只能在可用空间中工作。我已经尝试过本指南，但我不明白如何应用该段落......

Home 组件具有页面的具体内容。这是我感兴趣的索引代码：

export default class BluetoothController extends React.Component {
  static navigationOptions = {
    title: 'Home',
    header: null,
  };

   render() {
       [...]
       return (
      <DrawerLayoutAndroid
        drawerWidth={300}
        keyboardDismissMode='on-drag'
        drawerPosition={DrawerLayoutAndroid.positions.Left}
        renderNavigationView={() => drawerView}
        ref={'DRAWER_REF'} // riferimento per recuperare tramite this.refs['DRAWER_REF'] la sidebar
      >
        {/*Il contenuto della view va ALL'INTERNO DEL DRAWER TAG*/}
        <View style={mainStyles.container}>
          <StatusBar
            backgroundColor="#1976D2"
            barStyle="light-content"
          />
          <ToolbarAndroid
            title='Bluetooth Controller'
            titleColor='white'
            style={mainStyles.toolbar}
            navIcon={require('./images/menu.png')}
            onIconClicked={() => {
              // apro la sidebar grazie al riferimento che mi sono creato
              this.refs['DRAWER_REF'].openDrawer();
            }}
            actions={[{ title: 'Info', icon: require('./images/info.png'), show: 'always' }]}
            onActionSelected={(position) => {
              Alert.alert("Instructions", "Welcome to React Native! To get started, edit index.android.js, double tap R on your keyboard to reload, shake or press menu button for dev menu");
            }}
          />
        </View>
        <RouterOutlet/>
      </DrawerLayoutAndroid>

    );
  }
}
// impostazione del routing
const RouterOutlet = StackNavigator({
  Home: { screen: Home },
  OneBtnMode: { screen: OneBtnMode },
});
BluetoothController.router = RouterOutlet.router;
AppRegistry.registerComponent('BluetoothController', () => RouterOutlet);

现在它只显示主页内容...

4

0 回答 0