ToolBarAndroid無法在ReactNative中呈現

我想要獲得一個基本的Android工具欄，以便在我的React本機視圖上呈現，並且遇到麻煩。用我目前的代碼，它運行良好（沒有錯誤或任何東西），但工具欄不在那裏。任何關於我在做什麼的錯誤？提前致謝！ ToolBarAndroid無法在ReactNative中呈現

'use strict'; 
    const React = require('react-native'); 
    const MaterialKit = require('react-native-material-kit'); 
    const { 
     AppRegistry, 
     DrawerLayoutAndroid, 
     StyleSheet, 
     Text, 
     View, 
     ToolbarAndroid, 
    } = React; 

    const DRAWER_REF = 'drawer'; 

    const OpenLightApp = React.createClass({ 
     render: function() { 
     const navigationView = (
      <View style={{flex: 1, backgroundColor: '#88D8EC'}}> 
      <Text style={{margin: 10, fontSize: 15, textAlign: 'left'}}>Drawer Item</Text> 
      </View> 
     ); 

     return (

      <DrawerLayoutAndroid 
      drawerWidth={300} 
      ref={DRAWER_REF} 
      drawerPosition={DrawerLayoutAndroid.positions.Left} 
      renderNavigationView={() => navigationView}> 
      <View style={styles.container}> 
      <ToolbarAndroid 
       navIcon={require('image!hamburger')} 
       title="OpenLight" 
       titleColor="black" 
       style={styles.toolbar} 
       onIconClicked={() => this.refs[DRAWER_REF].openDrawer()} /> 
       <Text style={styles.welcome}> 
       Example Text 
       </Text> 
       <Text style={styles.instructions}> 
       To get started, edit index.android.js 
       </Text> 
       <Text style={styles.instructions}> 
       Shake or press menu button for dev menu 
       </Text> 
      </View> 
      </DrawerLayoutAndroid> 
     ); 
     } 
    }); 

    const styles = StyleSheet.create({ 
     container: { 
     flex: 1, 
     justifyContent: 'center', 
     alignItems: 'center', 
     backgroundColor: '#F5FCFF', 
     }, 
     welcome: { 
     fontSize: 20, 
     textAlign: 'center', 
     margin: 10, 
     }, 
     instructions: { 
     textAlign: 'center', 
     color: '#333333', 
     marginBottom: 5, 
     }, 
     toolbar: { 
     backgroundColor: '#00a2ed', 
     height: 56, 
     }, 
    }); 

    AppRegistry.registerComponent('OpenLightApp',() => OpenLightApp);

來源

2015-12-07 Jared Johnson

你有沒有想過這個？有完全相同的問題。 – Nolan

在版本0.26中，DrawerLayoutAndroid似乎需要將#drawerHeight設置爲某個任意值才能進行掛載。從0.27.1開始，DrawerLayoutAndroid不再需要高度。 – jhohlfeld

按照this issue，關鍵似乎是設置具有高度的工具欄上的樣式。如果沒有設置高度，則不會渲染。希望它很快得到解決。

來源

2016-01-14 23:32:32 Nolan

這裏的東西，對我工作的組合：

1）https://github.com/facebook/react-native/issues/2957#event-417214498

「你應該設置alignItems伸展（這也是默認值）的容器上，或給你的工具欄明確。寬度設置爲居中alignItems和沒有明確的寬度，工具欄給出0隱含寬度「

2）在工具欄上的設置高度

的代碼：

我下載了一個ic_arrow_back_black_24dp.png，並把它放在爲index.android.js文件

然後在index.android.js同一個文件夾，

class MyComponent extends Component { 
... 
render() { 
    return (

     <View style={styles.containerToolbar}> 
     <ToolbarAndroid style={styles.toolbar} 
         title={this.props.title} 
         //navIcon={require('image!ic_arrow_back_white_24dp')} 
         navIcon={require('./ic_arrow_back_black_24dp.png')} 
         onIconClicked={this.props.navigator.pop} 
         //titleColor={'#FFFFFF'}/> 
         titleColor={'#000000'}/> 
    </View> 

} 

const styles = StyleSheet.create({ 
    containerToolbar: { 
    flex: 1, 
    //justifyContent: 'center', 
    justifyContent: 'flex-start', 
    // https://github.com/facebook/react-native/issues/2957#event-417214498 
    alignItems: 'stretch', 
    backgroundColor: '#F5FCFF', 
    }, 
    toolbar: { 
    backgroundColor: '#e9eaed', 
    height: 56, 
    }, 

});

來源

2016-05-28 02:15:03 frank

您需要分配工具欄的高度和寬度，否則它不會呈現。

工具欄的代碼看起來應該是這樣

  <ToolbarAndroid 
      style={styles.toolbar} 
      title="Movies" 
      navIcon={require("../../ic_launcher.png")} 
      onActionSelected={this.onActionSelected} 
      titleColor= "000" 
      actions = {[ 
       {title: "Log out", show: "never"} 
      ]} 
      />

在行動選擇

 onActionSelected(position) { 
    }

樣式工具欄

toolbar: { 
    backgroundColor: '#2196F3', 
    height: 56, 
    alignSelf: 'stretch', 
    textAlign: 'center', 
},

結果

來源

2017-04-24 10:36:57

ToolBarAndroid無法在ReactNative中呈現

回答

相關問題