React-Navigation 使用

未完待续....
前言

学习导航的时候，网上的文章很多，但是看起来也越乱，学着学着就搞混了。没有一个系统的从浅到深的学习。知识点也容易遗漏。根据官网一步一步来，反而能够快速掌握。
（什么英文看不懂？）我刚开始也是看着迷糊，但是下载一个有道翻译，不明白的单词或者句子使用他翻译下，慢慢就习惯啦

先上效果图：

GIF.gif

参考react-nvigation 2x文档进行学习。
官网资料

1)起步

2)create StackNavigator

3)config StackNavigator

4)界面跳转，navigate,poptoTop,pop等

5)路由传参

6)配置 head bar,导航

7)导航传参

8)setParams传参

9）自定义头部样式 header styles

10)分享公共的navigationOptions 配置

11）自定义组件代替标题

12）header跳转button

13)头部按钮访问组件实例函数

14）full-screen model

1.起步

安装指定版本 ：npm install [email protected]

2.create StackNavigator

import React from 'react';
import { View, Text } from 'react-native';
import { createStackNavigator } from 'react-navigation';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
      </View>
    );
  }
}
export default createStackNavigator({
  Home: {
    screen: HomeScreen
  },
});

这样就能简单实现一个首页啦。当然这样代码多了就不好啦。每个界面写成.js，在导入。增加一个details.js,自己动手创建一个吧，我们就可以这样写啦

3.config StackNavigator

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
  }
);
export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

界面跳转，navigate,poptoTop,pop等

在首页中增加一个按钮，点击按钮跳转到详情

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

在详情界面，我们也增加一个按钮，来跳转到首页，看看啥效果？
DetailsScreen

...
<Button
          title="Go to Details... again"
          onPress={() => this.props.navigation.navigate('Details')}
        />
...

发现点击跳转不了。这里就涉及到其他知识点：

 navigate（‘name’）,跳转到新界面，如果已在当前name界面，就不在跳转了,跳转的的界面会有返回箭头
 
 push('name') 跳转到新界面，如果已在当前name界面，会继续创建新的screen,进行跳转

 goback(),销毁当前界面

 popToTop(),销毁所有界面回到初始化的第一个路由界面

自己试一试吧。这样下来，我们能进行界面切换啦，但是参数呢，参数怎么传

5路由传参

this.props.navigation.navigate('Details', {
             data:"消息"
            });

接收：
this.props.navigation.getParam('data',"默认数据")这样可以获得
另外一种方式
let {data} = this.props.navigation.state.params;

6.配置 headbar标题

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
  };
}

class DetailsScreen extends React.Component {
  static navigationOptions = {
    title: 'Details',
  };
}

像这样固定的写法，就能给相应的界面加上title啦。这样的优先级是最高的

7导航传参，就是标题中获取或者传递参数

写法就要变化啦

class DetailsScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      title: navigation.getParam('data', '默认值'),
    };
  };
}

8.setParams

...
 /* Inside of render() */
  <Button
    title="Update the title"
    onPress={() => this.props.navigation.setParams({data: '更新!'})}
  />

经历过这样的处理，headerbar的中关于navigation相关才能被识别出来

9自定义头部样式 header styles

class HomeScreen extends React.Component {
  static navigationOptions = {
    title: 'Home',
    headerStyle: {
      backgroundColor: '#f4511e',
    },
    headerTintColor: '#fff',
    headerTitleStyle: {
      fontWeight: 'bold',
    },
  };

  /* render function, etc */
}

更多的设置api，请查看官方文档api

10分享公共的navigationOptions 配置,headerbar设置

比如每个界面的样色样式都差不多，那么就可以在createStackNavigator中去添加公共配置。

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
    /* The header config from HomeScreen is now here */
    navigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  }
);

如果每个界面有自己的navigationOptions，那这个相同的就不能起作用。这是设置共同的，那分享是什么意思呢？比如首页，和详情界面本来都一样，但是这是你想改下详情中的一些样式，沿用公共设置中的属性数据

class DetailsScreen extends React.Component {
  static navigationOptions = ({ navigation, navigationOptions }) => {
    const { params } = navigation.state;

    return {
      title: params ? params.otherParam : 'A Nested Details Screen',
      /* These values are used instead of the shared configuration! */
      headerStyle: {
        backgroundColor: navigationOptions.headerTintColor,
      },
      headerTintColor: navigationOptions.headerStyle.backgroundColor,
    };
  };

  /* render function, etc */
}

感觉用处不大

自定义组件代替标题

用图片logo来替换标题

class LogoTitle extends React.Component {
  render() {
    return (
      <Image
        source={require('./spiro.png')}
        style={{ width: 30, height: 30 }}
      />
    );
  }
}

class HomeScreen extends React.Component {
  static navigationOptions = {
    // headerTitle instead of title
    headerTitle: <LogoTitle />,
  };

  /* render function, etc */
}

12 header中的button

class HomeScreen extends React.Component {
  static navigationOptions = {
    headerTitle: <LogoTitle />,
    headerRight: (
      <Button
        onPress={() => alert('This is a button!')}
        title="Info"
        color="#fff"
      />
    ),
  };
}

13)头部按钮访问组件实例函数

class HomeScreen extends React.Component {
  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: <LogoTitle />,
      headerRight: (
        <Button
          onPress={navigation.getParam('increaseCount')}
          title="+1"
          color="#fff"
        />
      ),
    };
  };

  componentDidMount() {
    this.props.navigation.setParams({ increaseCount: this._increaseCount });
  }

  state = {
    count: 0,
  };

  _increaseCount = () => {
    this.setState({ count: this.state.count + 1 });
  };

  /* later in the render function we display the count */
}

参考

14）creact a model stack

一你要有个model界面。

class ModalScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text style={{ fontSize: 30 }}>This is a modal!</Text>
        <Button
          onPress={() => this.props.navigation.goBack()}
          title="Dismiss"
        />
      </View>
    );
  }
}

这个model路由是跟首页和详情是一个级的。

const MainStack = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
    },
    Details: {
      screen: DetailsScreen,
    },
  },
  {
    /* Same configuration as before */
  }
);

const RootStack = createStackNavigator(
  {
    Main: {
      screen: MainStack,
    },
    MyModal: {
      screen: ModalScreen,
    },
  },
  {
    mode: 'modal',
    headerMode: 'none',
  }
);

在你想要展示的地方
onPress={() => navigation.navigate('MyModal')