React Navigation 之 StackNavigato

2018-09-30 本文已影响71人九龙

基本使用：

安装：npm install --save react-navigation
导入：import {StackNavigator} from 'react-navigation'

简单的例子：
创建一个StackNavigator

import {StackNavigator} from 'react-navigation'
import HomePage from "../pages/HomePage";
import Page1 from "../pages/Page1";
import Page2 from "../pages/Page2";
import Page3 from "../pages/Page3";

export const AppStackNavigator = StackNavigator(
    {
      HomePage: {
        screen: HomePage
      },
      Page1: {
        screen: Page1,
      },
      Page2: {
        screen: Page2,
      },
    }
)

App.js里面直接加载

import {AppStackNavigator} from './navigators/AppNavigators'

export default AppStackNavigator;

HomePage代码：

export default class HomePage extends Component<Props> {
  render() {
    const { navigation } =  this.props
    return (
        <View style={styles.container}>
          <Text style={styles.welcome}>来到HomePage</Text>
          <Button title="跳转到Page1" onPress={()=>{navigation.navigate('Page1')}}/>
          <Button title="跳转到Page2" onPress={()=>{navigation.navigate('Page2')}}/>
          <Button title="跳转到Page3" onPress={()=>{navigation.navigate('Page3')}}/>
        </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

运行结果：

运行结果

点击就能跳转

配置Navigator

整体配置：

export const AppStackNavigator = StackNavigator(
    {
      HomePage: {
        screen: HomePage
      },
      Page1: {
        screen: Page1,
      },
      Page2: {
        screen: Page2,
      },
      Page3: {
        screen: Page3,
      }
    },
    {
      mode:'modal',
      navigationOptions: {
        headerTitleStyle:{color:'red'},
        headerBackTitle: '返回',
        title:'示例'
      }
    }
)

所有的title都变成“示例”了

单独配置：单独配置可以在两个地方进行配置

HomePage: {
        screen: HomePage,
        navigationOptions:{
          title:'HomePage',
        }
      },
Page1: {
        screen: Page1,
        navigationOptions:{
          title:'Page1',
        }
      },

在Page2文件中配置

static navigationOptions={
    title:'Page2'
  }

StackNavigatorConfig

router的选项：

initialRouteName - 设置堆栈的默认页面。必须匹配RouteConfigs中的一个key。
initialRouteParams - 初始化路由的参数
navigationOptions - 用于页面的默认导航选项
paths - 用于覆盖RouteConfigs中设置的path的一个映射

视觉选项:

mode - 定义页面渲染和转换的风格：
- card - 使用标准的iOS和Android页面转换风格，此项为缺省。
- modal - 使页面从屏幕底部滑入，这是一种常见的iOS模式。只适用于iOS，在Android上不起作用。
headerMode - 定义标题该如何渲染：
- float - 渲染一个放在顶部的标题栏，并在页面改变时显示动画。这是iOS上的常见模式。
- screen - 每个页面上都有一个标题栏，标题栏与页面一起淡入淡出。这是Android上的常见模式。
- none - 没有标题栏
cardStyle - 使用这个属性覆盖或者扩展堆栈中单个Card的默认样式。
transitionConfig - 返回一个与默认页面的transitionConfig(参见类型定义)合并的对象的函数。提供的函数将传递以下参数：
- transitionProps - 新页面跳转的属性。
- prevTransitionProps - 上一个页面跳转的属性
- isModal - 指定页面是否为modal。
onTransitionStart - card跳转动画开始时要调用的函数。
onTransitionEnd - card跳转动画结束时要调用的函数。

Screen Navigation Options

`title`

可当作headerTitle的备用的字符串。此外，将用作tabBarLabel（如果嵌套在TabNavigator中）或drawerLabel（如果嵌套在DrawerNavigator中）的后备。

`header`

可以是React元素或给定了HeaderProps然后返回一个React元素的函数，显示为标题。设置为null隐藏标题。

`headerTitle`

字符串、React元素或被当作标题的React组件。默认显示title属性的值。当使用一个组件时，它会收到allowFontScaling，style和children属性。标题字符串在children中进行传递。

`headerTitleAllowFontScaling`

标题栏中标题字体是否应该缩放取决于文本大小是否可以设置。默认为true。

`headerBackTitle`

iOS上的返回按钮的文字使用的字符串，或者使用null来禁用。默认为上一个页面的headerTitle。

`headerTruncatedBackTitle`

当headerBackTitle不适合在屏幕显示时（一般是因为文字太多），返回按钮使用的标题字符串。默认是Back。

`headerRight`

显示在标题栏右侧的React元素。

`headerLeft`

用于在标题栏左侧展示的React元素或组件。当一个组件被渲染时，它会接收到很多的属性（onPress, title, titleStyle 等等， - 请检查 Header.js 的完整列表）

`headerStyle`

标题栏的样式

`headerTitleStyle`

标题栏中标题的样式

`headerBackTitleStyle`

标题栏中返回按钮标题的样式

`headerTintColor`

标题栏的色调

`headerPressColorAndroid`

material design中的波纹颜色 (仅支持Android >= 5.0)

`gesturesEnabled`

是否可以使用手势来关闭此页面。在iOS上默认为true，在Android上默认为false。

`gestureResponseDistance`

一个对象，用以覆盖从屏幕边缘开始触摸到手势被识别的距离。它具有以下属性：

horizontal - 数值型 - 水平方向的距离，默认值25
vertical - 数值型 - 垂直方向的距离，默认值135.

`gestureDirection`

字符串，用来设置关闭页面的手势方向，默认（default）是从做往右，inverted是从右往左

动态改变navigator

上一个页面传入title

static navigationOptions = ({navigation}) => {
    const {state, setParams} = navigation;
    const {params} = state
    return {
      title: params.title ? params.title : 'this page2'
    }

HomePage跳转的时候传值

<Button title="跳转到Page2" onPress={()=>{navigation.navigate('Page2',{title:'这是page2'})}}/>

根据页面事件改变 title 和 headerRight

Page3核心代码

export default class Page3 extends Component<Props> {
static navigationOptions = ({navigation}) => {
  const {state, setParams} = navigation
  const {params} = state
  return {
    title: '123',
    headerTitleStyle: {fontSize: 20, color: "red"},
    headerRight: (
        <Button
            title={params.mode === 'edit' ? '保存' : '编辑'}
            onPress={() => {
              setParams({mode: params.mode === 'edit' ? '' : 'edit'})
            }}
        />
    )
  }
}

render() {
  const {navigation} = this.props
  const {state, setParams} = navigation
  const {params} = state
  return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          欢迎来到page3
        </Text>
        <Button title="goBack" onPress={() => {
          this.props.navigation.goBack()
        }}></Button>

        <TextInput style={styles.input} onChangeText={(text) => {
          setParams({title: text, mode: text.length > 0 ? 'edit' : ''})
        }}/>
      </View>
  );
}
}

const styles = StyleSheet.create({
input: {
  height: 50,
  borderWidth: 1,
  marginTop: 20,
  width: 200,
},
container: {
  flex: 1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: '#F5FCFF',
},
welcome: {
  fontSize: 20,
  textAlign: 'center',
  margin: 10,
},
instructions: {
  textAlign: 'center',
  color: '#333333',
  marginBottom: 5,
},
});

HomePage跳转的时候传入mode

 <Button title="跳转到Page3" onPress={()=>{navigation.navigate('Page3',{mode:'edit'})}}/>

title和rightheader就可以随着输入变化