react-native导航栏react-navigation

学习交流：https://gitee.com/potato512/Learn_ReactNative

react-native学习交流QQ群：806870562

react-native使用react-navigation（https://reactnavigation.org/）进行导航功能开发。

效果图

使用

安装react-navigation这个包，在终端使用如下命令（需要在项目项目中执行）：

方法1：yarn add react-navigation

方法2：npm install --save react-navigation

使用

1、配置

（1）在App.js文件中的配置

导入头文件：import { createStackNavigator } from 'react-navigation';

注册并初始化路由页面：

const RootStack = createStackNavigator(

{

// 定义路由页面

Home: NavigationPage,

homeNext: NavigationPageNext,

Details: NavigationPageDetail,

},

{

// 初始化首页

initialRouteName: 'Home',

}

);

使用路由：

export default class App extends React.Component {

render() {

return <RootStack />;

}

}

（2）在其他被注册成路由的页面中配置

2、自定义样式

title：标题，不推荐使用（如果设置了这个导航栏和标签栏的title就会变成一样的）

headerTitle：设置导航栏标题，推荐

header：可以设置一些导航的属性，隐藏顶部导航栏设置为null

headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null

headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"

headerRight：设置导航条右侧。可以是按钮或者其他视图控件

headerLeft：设置导航条左侧。可以是按钮或者其他视图控件

headerStyle：设置导航条的样式。背景色，宽高等

headerTitleStyle：设置导航栏文字样式

headerBackTitleStyle：设置导航栏‘返回’文字样式

headerTintColor：设置导航栏颜色

headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0

gesturesEnabled：是否支持滑动返回手势，iOS默认支持，安卓默认关闭

如：

export default class NavigationPage extends React.Component {

// 配置导航栏

static navigationOptions = {

// 导航栏标题，不推荐

title: 'Home',

// 设置导航栏颜色

headerTintColor: "green",

// 导航条的样式，如背景色，宽高等

headerStyle:{

backgroundColor:"#1E90FF",

},

// 导航栏文字样式

headerTitleStyle:{

paddingLeft:20,

fontSize:30

},

};

}

或：

export default class NavigationPageNext extends React.Component {

constructor(props){

super(props);

_this = this;

}

// 配置导航栏

static navigationOptions = {

// 导航栏标题，推荐使用

headerTitle: (

<Button title="homeNext"

color="black"

onPress={() => alert("点击民航栏标题")}>

</Button>

),

// 导航栏返回按钮标题

headerBackTitle:"返回",

// 导航条左侧，可以是按钮或者其他视图控件

headerLeft: (

<TouchableOpacity onPress={() =>{

_this.props.navigation.goBack();

}}>

<Image style={{marginLeft:20, width:30, height:30}} source={require("../../Resources/leftBack.png")} resizeMode='center'></Image>

</TouchableOpacity>

),

// 导航条右侧。可以是按钮或者其他视图控件

headerRight: (

<Button title="Info"

color="red"

onPress={() => {

_this.props.navigation.navigate('Details')

}}/>

),

};

}

3、转场，页面跳转

（1）不带参数，且过滤历史

// navigae过滤现有导航，即如果已导航到视图B，再导航时不会导航

this.props.navigation.navigate('homeNext')

（2）带参数，且过滤历史

// navigae不过滤现有导航，即如果已导航到视图B，再导航时继续导航

this.props.navigation.navigate('homeNext', {message:"导航过来了"})

（3）不带参数，且不过滤历史

// push过滤现有导航，即如果已导航到视图B，再导航时不会导航

this.props.navigation.push('homeNext')

（4）带参数，且不过滤历史

// push不过滤现有导航，即如果已导航到视图B，再导航时继续导航

this.props.navigation.push('homeNext', {message:"导航过来了"})

（5）返回

this.props.navigation.goBack()

或：

this.props.navigation.pop()

或（根页面）：

this.props.navigation.popToTop()

4、传值

（1）进入B页面时，A页面传值

this.props.navigation.navigate('homeNext', {message:"导航过来了"})

或：

this.props.navigation.push('homeNext', {message:"导航过来了"})

（2）进入B页面后，接收并使用A页面传过来的值

<Text>导航栏使用: {this.props.navigation.state.params.message}</Text>