ToolBarAndroid không hiển thị trong ReactNative

Question

Tôi đang cố gắng để có được Thanh công cụ Android cơ bản hiển thị trên chế độ xem gốc React của mình và tôi đang gặp sự cố. Với mã hiện tại của tôi, nó chạy tốt (không có lỗi hoặc bất kỳ điều gì) nhưng Thanh công cụ không có ở đó. Bất kỳ đề xuất nào về những gì tôi đang làm sai? Cảm ơn trước!

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

Answer 1

Theo this issue, phím dường như được đặt một kiểu trên thanh công cụ mà có một chiều cao. Nếu không có chiều cao được đặt, nó sẽ không hiển thị. Hy vọng rằng nó sẽ sớm được giải quyết.

Answer 2

Đây là sự kết hợp của những điều mà làm việc cho tôi:

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

"Bạn nên đặt alignItems căng (mà cũng là mặc định) trên container của bạn, hoặc cung cấp cho thanh công cụ của bạn một rõ ràng . chiều rộng với alignItems thiết lập để tập trung và không có chiều rộng rõ ràng, thanh công cụ được đưa ra 0 width ngầm "

2) thiết lập chiều cao trên thanh công cụ

mã:.

Tôi đã tải về một ic_arrow_back_black_24dp.png, và đặt nó trong thư mục tương tự như file index.android.js

Sau đó, trong 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, 
    }, 

}); 

Answer 3

Bạn cần phải gán cả chiều cao và chiều rộng cho thanh công cụ nếu không nó sẽ không hiển thị.

đang thanh công cụ của bạn sẽ trông như thế này

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

On Action chọn

 onActionSelected(position) { 
    } 

Phong cách cho thanh công cụ

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

quả