技术标签: 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)
每次由导航器管理的导航状态更改时都会调用的函数。它接收先前的状态,导航的新状态以及发出状态更改的动作。
默认情况下,它将状态更改打印到控制台。
文章浏览阅读1.2k次。http://www.qconbeijing.com/download/Nicolas.pdf重点看了下facebook做了哪些改进以及他们的运维经验,比较重要的有以下几点: 改进:1 加强了行级的ACID约束2 改善了数据的分布规则,可以配置hdfs的replicas所在节点3 改写了master的assign规则,利用zk来进行assign4 不用停机地重启clus_hbase运维经验
文章浏览阅读1.2w次,点赞14次,收藏63次。CSS3实现多种load加载效果,纯CSS3实现多种加载中效果,纯CSS3实现28种加载动态效果,页面实现loading效果,好看的loading动态特效,animation与transform的灵活应用。
文章浏览阅读2.8w次,点赞13次,收藏54次。初学前端,用的架子是 vue+element ,目前有个需求,想将string类型的json字符串,以json格式展示。利用vue-json-viewer插件,利用这个插件,可方便快速实现 高亮,JSON折叠,copy 三种功能 !!!官网地址:https://www.npmjs.com/package/vue-json-viewer效果展示先放最终效果:..._vue-json-viewer官网
文章浏览阅读520次。http://ybt.ssoier.cn:8088/problem_show.php?pid=1215 1215:迷宫 时间限制: 1000 ms 内存限制: 65536 KB 提交数: 37906 通过数: 11425 【题目描述】 一天Extense在森林里探险的时候不小心走入了一个迷宫,迷宫可以看成是由n×nn×n的格点组成,每个格点只有22种状态,.和#,前者表示可以通行后者表示不能通行。同时当Extense处在某个格点时,..._迷宫连通 算法
文章浏览阅读1.1k次,点赞26次,收藏22次。通俗:将负载变的均衡。负载(请求、工作任务)、均衡(算法 ,中间件)。高并发:负载均衡通过算法调整负载,尽力均匀的分配应用集群中各节点的工作量,以此提高应用集群的并发处理能力(吞吐量)。伸缩性:添加或减少服务器数量,然后由负载均衡进行分发控制。这使得应用集群具备伸缩性。高可用:负载均衡器可以监控候选服务器,当服务器不可用时,自动跳过,将请求分发给可用的服务器。这使得应用集群具备高可用的特性。安全防护:有些负载均衡软件或硬件提供了安全性功能,如:黑白名单处理、防火墙,防 DDos 攻击等。_openresty lua根据网络状况分配权重
文章浏览阅读636次。关于分布式事务 seata集成(springboot+dubbo+zokeeper+seata)参考博客:https://blog.csdn.net/u010046908/article/details/102661739/一、下载seata1.3.0服务端 并安装启动 (注意 0.9.0版跟1.X差别很大) https://github.com/seata/seata/releases/tag/v1.3.0目录为 . ├──bin ├──conf └──l..._zk连接不上seate
文章浏览阅读276次。一.系统吞度量要素: 一个系统的吞度量(承压能力)与request对CPU的消耗、外部接口、IO等等紧密关联。单个reqeust 对CPU消耗越高,外部系统接口、IO影响速度越慢,系统吞吐能力越低,反之越高。系统吞吐量几个重要参数:QPS(TPS)、并发数、响应时间 QPS(TPS):每秒钟request/事务 数量 并发数: 系统同时处理的request/事务数 ..._计算pqs用不用加根号三?
文章浏览阅读1.1k次。作者Md Kamaruzzaman 是 Medium 的一位科技博文作者,一位解决方案架构师,同时也是一位科技作者、全栈开发,专注在云和大数据方向,base 德国。译者唐小智,前InfoQ..._精通区块链编程——加密货币原理,方法和应用开发 百度云
文章浏览阅读3.9k次,点赞8次,收藏16次。一、音频简介音频是我们最常用到的功能,音频也是 linux 和安卓的重点应用场合。处理器要想“听到”外界的声音必须要把外界的声音转化为自己能够理解的“语言”,处理 器能理解的就是 0 和 1,也就是二进制数据。所以我们需要先把外界的声音转换为处理器能理 解的 0 和 1,在信号处理领域,外界的声音是模拟信号,处理器能理解的是数字信号,因此这 里就涉及到一个模拟信号转换为数字信号的过程,而完成这个功能的就是 ADC 芯片。同理,如果处理器要向外界传达自己的“心声”,也就是放音,那么就涉及到将处理器能理 _audio的位宽
文章浏览阅读10w+次,点赞50次,收藏162次。继续字符编码的学习。今天介绍一下GBK(汉字内码扩展规范),GB 2312 GB18030。引用网友的话可以概括一下:GBK和UTF8的区别:GBK就是在保存你的帖子的时候,一个汉字占用两个字节。。外国人看会出现乱码,此为我中华为自己汉字编码而形成之解决方案。UTF8就是在保存你的帖子的时候,一个汉字占用3个字节。。但是外国人看的话不会乱码,此为西人为了解决多字节字符而形成之解决方案。GBK编码是GB2312编码的超集,向下完全兼容GB2312。GB18030编码向下兼容GBK和GB2312,GB_汉字编码对照表gbk
文章浏览阅读5.6k次,点赞3次,收藏9次。主芯片:Hi3519AV100SDK版本:Hi3519AV100R001C02SPC010开发系统:Ubuntu 16.04Flash :SPI nor FlashHi3519AV100默认采用的是RGMII的千兆网络,客户采用的是GMII,所以需要修改配置大体分三步:1、修改配置表2、修改uboot下头文件3、修改kernel下DTS(设备树源码)配置表..._usb网卡rgmii转rmii
文章浏览阅读2.5k次。在我们平常办公中,经常会用到局域网共享文件,这样可以大大提高办公效率,但是如果不想共享文件了,应该如何将其关闭共享呢?本期教程小编将为大家带来Win11关闭共享文件夹的方法介绍,步骤简单,安全有效,我们一起来看看吧。更多重装系统教程尽在小白系统重装官网 1、首先找到不想共享的文件夹,右键打开“属性”。 2、接着进入上方“共享”选项卡。 3、然后点开其中的“高级共享”设置。 4、打开后,取消其中的“共享此文件夹”。 5、最后点击下面“确定”保存就可以取消共享了。_win11取消共享