- 第1节:React 入门
- 第2节:React 安装 Android 运行环境
- 第3节:React Native 样式
- 第4节:React Native 手势应答系统
- 第5节:React Native 辅助功能
- 第6节:React Native 模块(iOS)
- 第7节:React Native UI 组件(iOS)
- 第8节:React Native UI 组件(Android)
- 第9节:React Native 调试 React Native 应用
- 第10节:React Native 测试
- 第11节:React Native 在设备上运行
- 第12节:React Native 在设备上运行(Android)
- 第13节:React Native 与现有的应用程序集成
- 第14节:React Native JavaScript 环境
- 第15节:React Native 已知 Issues
- 第16节:React Native iOS 活动指示器
- 第17节:React Native iOS 日期选择器
- 第18节:React Native DrawerLayoutAndroid
- 第19节:React Native 图片
- 第20节:React Native 列表视图
- 第21节:React Native Map 视图
- 第22节:React Native 导航器
- 第23节:React Native iOS 导航器
- 第24节:React Native iOS 选择器
- 第25节:React Native ProgressBarAndroid
- 第26节:React Native 滚动视图
- 第27节:React Native iOS 滑块
- 第28节:React Native SwitchAndroid
- 第29节:React Native iOS 开关
- 第30节:React Native iOS 选项卡
- 第31节:React Native TabBarIOS.Item
- 第32节:React Native 文本
- 第33节:React Native 文本输入
- 第34节:React Native ToolbarAndroid
- 第35节:React Native 高亮触摸
- 第36节:React Native 不透明触摸
- 第37节:React Native 无反馈触摸
- 第38节:React Native 视图
- 第39节:React Native Web 视图
- 第40节:React Native iOS 警告
- 第41节:React Native 应用程序注册表
- 第42节:React Native iOS 应用程序状态
- 第43节:React Native 异步存储
- 第44节:React Native BackAndroid
- 第45节:React Native 相机滚动
- 第46节:React Native 交互管理器
- 第47节:React Native 动画布局
- 第48节:React Native iOS 链接
- 第49节:React Native 网络信息
- 第50节:React Native 全景响应器
- 第51节:React Native 像素比率
- 第52节:React Native iOS 推送通知
- 第53节:React Native iOS 状态栏
- 第54节:React Native 样式表
- 第55节:React Native ToastAndroid
- 第56节:React Native iOS 震动
- 第57节:React Native Flexbox
- 第58节:React Native 定位
- 第59节:React Native 网络
- 第60节:React Native 计时器
React Native 导航器
在你的应用程序中使用 Navigator
来在不同场景之间过渡。为了实现这一功能,为导航器提供了路由对象来识别每一个场景,还提供了一个 renderScene
函数,导航器可以用它来为给定的路线渲染场景。
为了改变场景的动画或动作属性,提供了一个 configureScene
道具来为给定的路由配置对象。看到导航器。默认动画及更多的关于场景配置选项的信息,请看 Navigator.SceneConfigs
。
基本的使用<Navigator
initialRoute={{name: 'My First Scene', index: 0}}
renderScene={(route, navigator) =>
<MySceneComponent
name={route.name}
onForward={() => {
var nextIndex = route.index + 1;
navigator.push({
name: 'Scene ' + nextIndex, index: nextIndex,
});
}}
onBack={() => { if (route.index > 0) {
navigator.pop();
}
}}
/>
}
/>
导航方法
<Navigator
initialRoute={{name: 'My First Scene', index: 0}}
renderScene={(route, navigator) =>
<MySceneComponent
name={route.name}
onForward={() => {
var nextIndex = route.index + 1;
navigator.push({
name: 'Scene ' + nextIndex, index: nextIndex,
});
}}
onBack={() => { if (route.index > 0) {
navigator.pop();
}
}}
/>
}
/>
Navigator
有两种方式进行导航。如果你有一个参考元素,你可以调用一些方法来触发导航:
jumpBack()
——在不需要卸载当前场景的情况下向后跳jumpForward()
——向前跳转到路线堆栈中的下一个场景 -jumpTo(route)
——过渡到一个现有的没有被卸载的场景push(route)
——导航到一个新的场景,挤压任何你能够jumpForward
的场景 -pop()
——回归并卸载当前场景 -replace(route)
——用一个新路线替换当前场景`replaceAtIndex(route,index)——取代一个由索引指定的场景
replacePrevious(route)
——取代之前的场景immediatelyResetRouteStack(routeStack)
——用一组路线重置每个场景popToRoute(route)
——弹出一个由它的路线指定的特定的场景。这之后所有的场景将被卸载popToTop()
——弹出堆栈中的第一个场景,卸载其他场景
导航器对象
通过 renderScene
函数 navigator 对象对场景是可用的。对象有所有的导航方法,以及一些实用程序:
parentNavigator
——父导航对象的参考,在 props.navigator 中被传递onWillFocus
——用来向父导航器传递一个导航焦点事件onDidFocus
——用来向父导航器传递一个导航焦点事件
Props
Edit on GitHub
configureScene 函数型
可选功能,允许配置场景动画和手势。将由路线调用,且应该返回一个场景配置对象
(route) => Navigator.SceneConfigs.FloatFromRight
initialRoute 对象型
提供一个单一的“路线”来开始。路线是一个任意的对象,导航器将使用它在场景呈现之前确定每个场景。initialRoute 或 initialRouteStack 是必需的。
initialRouteStack [对象型]
提供一组路线来呈现最初的场景。如果没有提供 initialRoute,那么该道具就会被需求。
navigationBar 节点型
以可选的方式提供一个能够存留在场景之间转换的导航栏
navigator 对象型
以可选的方式从父导航器提供 navigator 对象
onDidFocus 函数型
在场景过渡完成后或在最初安装后该函数会被每个场景的新路线调用。这将覆盖在 this.props.navigator 的onDidFocus处理程序上。
onItemRef 函数型
当场景参考发生变化时,该函数会被调用 (ref,indexInStack)
onWillFocus 函数型
将在安装中和每个导航转换之前发射目标路线,覆盖this.props.navigator中的处理程序。这将覆盖this.props.navigator 中的 onDidFocus 处理程序
renderScene 函数型
对于一个给定的路线哪一个场景会出现需要该函数。将由路线和 navigator 对象调用。
(route, navigator) => <MySceneComponent title={route.title} />
sceneStyle View#style
设置样式,以应用于每个场景的容器中。