导航栏 - React Native
Navigation Bar - React Native
我正在使用 React Native 创建移动应用程序,我决定使用来自网站“https://github.com/beefe/react-native-navigation-bar”的导航栏,但我不知道如何在我的代码中使用它。
我希望您将网站“https://github.com/beefe/react-native-navigation-bar”的导航栏示例发送给我。
这个文档清楚地展示了如何使用这个组件。仅需 2 个步骤:
安装包。
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>
);
}
}
我认为你应该使用插件: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 中轻松创建自定义 header 栏
我正在使用 React Native 创建移动应用程序,我决定使用来自网站“https://github.com/beefe/react-native-navigation-bar”的导航栏,但我不知道如何在我的代码中使用它。
我希望您将网站“https://github.com/beefe/react-native-navigation-bar”的导航栏示例发送给我。
这个文档清楚地展示了如何使用这个组件。仅需 2 个步骤:
安装包。
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> ); } }
我认为你应该使用插件: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 中轻松创建自定义 header 栏