技术标签: react-native react-native导航栏
在安装几个库:(不要问为什么,我也不知道。如果有知道的请告知。万分感谢!!!)
react-navigation
react-native-reanimated
react-native-gesture-handler
react-native-screens
react-navigation-stack
使用 react-navigation-stack
路由配置对象是从路由名称到路由配置的映射,它告诉导航器针对该路由显示什么内容
createStackNavigator(RouteConfigs, StackNavigatorConfig);
RouteConfigs
: 路由配置对象中的键是路由名称,值是该路由的配置。配置上唯一需要的属性是screen(用于路由的组件)。
StackNavigatorConfig
: createStackNavigator
是一个函数,它接受一个路由配置对象和一个选项对象,并返回一个React组件。
例子:
import React, {
Component } from 'react';
import {
createAppContainer } from 'react-navigation';
import {
createStackNavigator } from 'react-navigation-stack';
import {
Text,
View,
Button,
} from 'react-native';
class DetailsScreen extends React.Component {
render() {
return (
<View style={
{
flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Detailss: DetailsScreen
});
多个的时候呢~
import React, {
Component } from 'react';
import {
createAppContainer } from 'react-navigation';
import {
createStackNavigator } from 'react-navigation-stack';
import {
Text,
View,
Button,
} from 'react-native';
class DetailsScreen extends React.Component {
render() {
return (
<View style={
{
flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
}
class HomeScreen extends React.Component {
render() {
return (
<View style={
{
flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Detailss: DetailsScreen, // 堆栈导航器上定义路由
Home: HomeScreen // 堆栈导航器上定义路由
},{
initialRouteName: 'Home' // 初始化的时候要显示的路由
});
this.props.navigation.navigate('RouteName')
只能导航到堆栈导航器上定义好的路由,如果不在堆栈上则不会有反应。this.props.navigation.push('RouteName')
将新路由添加到堆栈导航器。this.props.navigation.goBack();
返回上一个路由(与设备的返回键相同作用) 在Android上,React Navigation会挂接到硬件后退按钮,并goBack()在用户按下它时为您触发该功能this.props.navigation.popToTop()
返回到堆栈中的第一个路由。import React, {
Component } from 'react';
import {
createAppContainer } from 'react-navigation';
import {
createStackNavigator } from 'react-navigation-stack';
import {
Text,
View,
Button,
} from 'react-native';
class DetailsScreen extends React.Component {
render() {
return (
<View style={
{
flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button
title='add screen'
onPress={
() => this.props.navigation.push('Details') } // 跳转至DEtails
/>
<Button
title='Go to Home'
onPress={
() => this.props.navigation.navigate('Home') } // 返回home路由
/>
<Button
title='Go back'
onPress={
() => this.props.navigation.goBack() } // 返回上一个路由
/>
<Button
title='one'
onPress={
() => this.props.navigation.popToTop() } // 返回第一个路由
/>
</View>
);
}
}
class HomeScreen extends React.Component {
render() {
return (
<View style={
{
flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title='Go to detail'
onPress={
() => this.props.navigation.navigate('Details')} // 跳到Details路由
/>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Detailss: DetailsScreen, // 堆栈导航器上定义路由
Home: HomeScreen // 堆栈导航器上定义路由
},{
initialRouteName: 'Home' // 初始化的时候要显示的路由
});
待整理…
this.props.navigation.navigate('Details', {})
第二个参数就是要传递的参数。this.props.navigation.getParam('name', 'NO-ID')
接收参数,第一个参数是要接收的key
this.props.navigation.state.params
拿到所有的参数this.props.navigation.setParams({ name: 'Updated!' })
// 更新接收到的值 (把name:
原值修改为 Updated!
)基于原来的例子:
import React, { Component } from 'react';
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import {
Text,
View,
Button,
} from 'react-native';
class HomeScreen extends Component {
render() {
return (
<View style={
{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title='Go to detail'
onPress={
() => {
this.props.navigation.navigate('Details', {
number: 568,
name: 'mrceel'
}) // 第二个参数就是要传递的参数。
}
}
/>
</View>
)
}
}
class DetailsScreen extends React.Component {
render() {
const { navigation } = this.props;
return (
<View style={
{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Text>
参数: {JSON.stringify(navigation.state.params)} //拿到所有的参数
</Text>
<Text>
name:
{JSON.stringify(navigation.getParam('name', 'default value'))} // 接收参数
</Text>
<Button
title='add screen'
onPress={ () => {this.props.navigation.push('Details', {
number: Math.floor(Math.random() * 100), // 传递参数
})} }
/>
<Button
title="Update the title"
onPress={() => this.props.navigation.setParams({ name: 'Updated!' })} // 更新接收到的值
/>
</View>
);
}
}
const AppNavigator = createStackNavigator({
Home: HomeScreen,
Details: DetailsScreen
},
{
initialRouteName: 'Home',
});
// export default createAppContainer(AppNavigator);
const AppContainer = createAppContainer(AppNavigator);
export default class App extends React.Component {
render() {
return <AppContainer />;
}
}
传递给navigationOptions函数的参数是具有以下属性的对象:
navigation
- 屏幕的导航道具,屏幕的路径为navigation.state
。screenProps
-从导航器组件上方传递的道具navigationOptions
-如果未提供新值,则将使用默认或先前的选项navigation
在上面的示例中,我们只需要prop
。但是在某些情况下,您可能想使用screenPropsor
navigationOptions
。关键性能用途:headerStyle
,headerTintColor
,和headerTitleStyle
。
headerStyle
:设置标题行的样式。headerTintColor
:后退按钮和标题都使用此属性作为其颜色。在下面的示例中,我们将颜色设置为白色(#fff),headerTitleStyle
:如果要自定义标题的fontFamily,fontWeight以及其他Text样式属性,可以使用它来完成。class HomeScreen extends Component {
// 定义单个组件的样式
static navigationOptions = {
title: 'Home',
headerStyle: {
backgroundColor: '#f4511e', // 设置标题行的背景颜色
},
headerTintColor: '#fff', // 标题颜色
headerTitleStyle: {
fontWeight: 'bold', // 其它样式
},
}
render() {
return (
<View style={
{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
<Button
title='Go to detail'
onPress={
() => {
this.props.navigation.navigate('Details', {
number: 568,
name: 'mrceel'
})
}
}
/>
</View>
)
}
}
如果要定义多个组件的样式可以直接写在 createStackNavigator()
里面。 例如:
const AppNavigator = createStackNavigator({
Home: HomeScreen,
Details: DetailsScreen
},
{
initialRouteName: 'Home',
defaultNavigationOptions: {
headerStyle: {
backgroundColor: '#f4511e',
},
headerTintColor: '#fff',
headerTitleStyle: {
fontWeight: 'bold',
},
}
});
这样所有的标题头部样式都一样了。 如果想某一个的样式不一样呢?也是可以的。如下:
class DetailsScreen extends React.Component {
static navigationOptions = ({navigation, navigationOptions}) => {
return {
title: navigation.getParam('name', 'a test deetails screen'),
headerStyle: {
backgroundColor: 'red', // 样式覆盖
},
headerTintColor: 'yellow', // 样式覆盖
}
}
render() {}
}
如此便成功了。
那如果我想用图片或者自定义的组件代替标题能行吗?!答案是肯定的。 如下:
// 创建一个图片'组件' (自定义组件)
class ImageTitle extends Component {
render(){
return(
<Image
source={require('./source/img/title.jpg')}
style={
{ width: 30, height: 30 }}
/>
)
}
}
class HomeScreen extends Component {
static navigationOptions = {
headerTitle: () => <ImageTitle />, // 直接使用即可
headerRight: () => <Button onPress={() => alert('This is a button!')} title="Infos" color="#fff"/>, // 右边增加按钮
headerLeft: () => <Button onPress={() => alert('This is a button!')} title="Infos" color="#fff"/>, // 左边增加按钮
}
render() {
// ....
}
onNavigationStateChange(prevState, newState, action)
每次由导航器管理的导航状态更改时都会调用的函数。它接收先前的状态,导航的新状态以及发出状态更改的动作。
默认情况下,它将状态更改打印到控制台。
文章浏览阅读88次。从SQL改写到SQL重写,什么样的SQL才是好SQL?黄浩 2016-12-14 10:02:26作者介绍黄浩,现任职于中国惠普,从业十年,始终专注于SQL。十年一剑,十年磨砺。3年通信行业,写就近3万条SQL;5年制造行业,遨游在ETL的浪潮;2年性能优化,厚积薄发自成一家。在生活中,很多时候我们会有这样的体悟:问题要么不出,一旦出现,会像多诺米骨牌一样,会连锁引发诸多相关问题,让我们疲于应付。..._黄浩 sql
文章浏览阅读578次,点赞2次,收藏2次。==============================================================================================================教程&电子书==============================================================================================================C#入门经典_.net课程下载
文章浏览阅读3.8k次,点赞2次,收藏8次。来来来,这里解释下从网卡PHY到IP层的数据接收流程:这里是以函数调用方式来体现:netif_add——》ethernetif_init——》low_level_init——》ethernetif_input——》low_level_input和tcpip_input——》ethernet_input——》ip4_input(etharp_input、pppoe_disc_input)——》udp..._stm32f7 lwip
文章浏览阅读1.6w次。报错系统Centos报错提示Input/output error检查服务器机器中多硬盘是否其中有一块硬盘坏掉了。第二种可能:RAID阵列可能有问题。。。_linux 写入文件到挂载的nas下提示failed to close...input/output error
文章浏览阅读4k次。SearchControl搜索框中的问题提示,代码为: this.searchControl1.Properties.NullValuePrompt = "请输入搜索关键字";_devexpress searchcontrol1
文章浏览阅读4.8k次。htop众所周知是是一款强大的是Linux系统中的一个互动的进程查看器(作为top的替代品),一个文本模式的应用程序(在控制台或者X终端中),一般情况下一句yum install htop就能轻松安装,但是很多时候我们会遇到无法连接外网的情况。_htop 离线
文章浏览阅读2k次。第一部分(1-6):前端纯静态网页模板无后台+大量网站设计素材 1:PC模板: 9900套响应式html5+css3网页模板【页面齐,二级,三级页均有,含中文模板】 2:PSD模板:3000套PSD模板+600套Flash酷站源文件+千套矢量ICO图标 3:手机模板:2000套各行业中文手机..._chengren 电影
文章浏览阅读441次。连接到: Oracle Database 10g Enterprise Edition Release 10.2.0.1.0 - ProductionWith the Partitioning, OLAP and Data Mining optionsORA-39001: 参数值无效ORA-39000: 转储文件说明错误ORA-39143: 转储文件 "F:\ora10G_expdp\ic_pri..._ora39143
文章浏览阅读3.4w次,点赞16次,收藏28次。#includemain(){ int n,a[40],i,count=0; printf("请输入学生人数:"); scanf("%d",&n); printf("请输入各学生成绩:\n"); for(i=0;i
文章浏览阅读391次。第一部分,JAVA基础和面向对象 part01 入门与开发环境搭建 1: 计算机基础知识(了解)(1)计算机(2)计算机硬件(3)计算机软件系统软件:windows,linux,mac应用软件:QQ,YY,扫雷,CS/F(4)软件开发就是用开发工具和计算机语言做出软件(5)计算机语言人与计算机的交流方式(6)人机交互A:图像界面方便,简单,直观。B:DOS 窗口方式要有控制台, 要记住很多的命令,..._cuser.getchinese().equals("null")
文章浏览阅读2w次,点赞15次,收藏43次。此篇博客介绍了一种将PDF转换为矢量图emf、编辑emf的方法(需要Adobe Acrobat)_pdf转emf
文章浏览阅读1.1k次。下表列出了各个 Android Gradle 插件版本所需的 Gradle 版本。要获得最佳性能,您应该使用 Gradle 和插件这两者的最新版本。插件版本 所需的 Gradle 版本 1.0.0 - 1.1.3 2.2.1 - 2.3 1.2.0 - 1.3.1 2.2.1 - 2.9 1.5.0 2.2.1 - 2.13 2.0.0 - 2.1...._gradle distributionurl 有那些版本