react-native导航栏react-navigation

迷南。 2022-05-22 09:51 195阅读 0赞

学习交流：[https://gitee.com/potato512/Learn\_ReactNative][https_gitee.com_potato512_Learn_ReactNative]

react-native学习交流QQ群：806870562

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

效果图

![70][]

使用

安装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();

\}\}>

</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>

[https_gitee.com_potato512_Learn_ReactNative]: https://gitee.com/potato512/Learn_ReactNative
[react-navigation]: https://reactnavigation.org/
[70]: /images/20220522/a292b34037f84c9b86d2f3763b0e044e.png

react-native导航栏react-navigation

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关二级导航栏

相关粘性导航栏

相关 Bootstrap 导航栏

相关 Bootstrap导航栏

相关导航栏

相关导航栏切换效果

相关 Bootstrap 导航栏

相关导航栏

相关导航栏切换

相关 rn 底部导航栏