导航栏 - React Native答案

【问题标题】：Navigation Bar - React Native导航栏 - React Native
【发布时间】：2016-12-18 07:24:58
【问题描述】：

我正在使用 React Native 创建一个移动应用程序，我决定使用来自站点“https://github.com/beefe/react-native-navigation-bar”的导航栏，但我不知道如何在我的代码中使用它。

我希望您向我发送网站“https://github.com/beefe/react-native-navigation-bar”的导航栏示例。

【问题讨论】：

标签： react-native navigationbar react-native-android

【解决方案1】：

这个文档清楚地展示了如何使用这个组件。只需两步：

安装包。

 npm install react-native-navigation-bar --save

导入和使用。以您喜欢的方式更改属性。

import React, { Component } from 'react';
import { Text, View } from 'react-native';

import NavigationBar from 'react-native-navigation-bar';

export default class Example extends Component {
  render() {
    return (
      <View>
        <NavigationBar 
          title='Main title'
          height={50}
          leftButtonTitle='back'
          rightButtonTitle='forward'
        />
        <Text>ABC</Text>
      </View>
    );
  }
}

【讨论】：

我阅读了网站上的内容，但我仍然不确定我是否以正确的方式使用导航栏。
好的，只需导入它并像您创建的组件一样使用。
我收到此错误：未定义不是对象（正在评估'_react.PropTypes.string'）
@KishanBharda 你解决了这个问题吗？
不，我已经完成了简单地修改 react-navigation 标头。

【解决方案2】：

我认为你应该使用一个插件：navigationbar-react-native

首先，如果你使用 react-navigation 你应该隐藏 header-bar 并使用自定义 header-bar

export const RootStack = createStackNavigator(
  {
    App: {
      screen: AppComponent,
      navigationOptions: {
        header: null,
      },
    },
  },
  {
    initialRouteName: 'App',
  }
);

1、安装包

npm i navigationbar-react-native --save

2、使用

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,Image,
  View, 
  TouchableOpacity,
} from 'react-native';
import NavigationBar from 'navigationbar-react-native';
 
const ComponentLeft = () => {
  return(
    <View style={{ flex: 1, alignItems: 'flex-start'}} >
       <TouchableOpacity style={ {justifyContent:'center', flexDirection: 'row'}}>
        <Image 
          source={require('./img/ic_back.png')}
          style={{ resizeMode: 'contain', width: 20, height: 20, alignSelf: 'center' }}
        />
        <Text style={{ color: 'white', }}>Back Home</Text>
      </TouchableOpacity>
    </View>
  );
};
 
const ComponentCenter = () => {
  return(
    <View style={{ flex: 1, }}>
       <Image
        source={require('./img/ic_logo.png')}
        style={{resizeMode: 'contain', width: 200, height: 35, alignSelf: 'center' }}
      />
    </View>
  );
};
 
const ComponentRight = () => {
  return(
    <View style={{ flex: 1, alignItems: 'flex-end', }}>
      <TouchableOpacity>
        <Text style={{ color: 'white', }}> Right </Text>
      </TouchableOpacity>
    </View>
  );
};
 
class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <NavigationBar 
          componentLeft     = { () =>  {<ComponentLeft />   }
          componentCenter   = { () =>  {<ComponentCenter /> }
          componentRight    = { () =>  {<ComponentRight />  }
          navigationBarStyle= {{ backgroundColor: ''#215e79'' }}
          statusBarStyle    = {{ barStyle: 'light-content', backgroundColor: '#215e79' }}
        />
      </View>
    );
  }
}

在 react native 中轻松创建自定义标题栏

【讨论】：