React-Native 一、Navagation导航

react-native

上篇文章给大家介绍了搭建 React-Native 的流程, 如果没有看的或者React-Native 环境没有搭建的,可以看下我的上一篇文章 React-Native环境搭建, 搭建好了,就可以开始我们的项目了,接下来给大家分享下我第一个项目, 基于 React-Native 的导航 Navigation开发.

项目可到github下载: https://github.com/YTiOSer/YTReact-Native_Navigation

1.准备工作

要在 React-Native 中使用导航, 需要提前在项目中引入对应的库, React-Native中现有的几个导航组件: React Navigation 、 NavigatorIOS 、Navigator, 如果你刚开始接触，那么直接选择 React Navigation 就好。如果你只针对 iOS 平台开发，并且想和系统原生外观一致，那么可以选择 NavigatorIOS 。而 Navigator 这个是最早的组件，已经在逐步被 React Navigation 替代，但是它经历了长期的实践，较为稳定。现在用的比较广泛切通用的就是 React Navigation, 本文就详细讲解下这个组件的使用。

• 通过终端进入项目, 然后添加 react-navigation.

addrnnav.png

• 然后在项目中引入 React Navigation.

import { createStackNavigator } from 'react-navigation';

2.导入用到的控件

这个项目中因为是导航, 所以涉及到了 View、Button、Alert 等.

import {
  StyleSheet,
  View,
  Text,
  Button,
  Alert,
} from 'react-native';

3. 创建两个页面用于跳转

这里创建 Home 和 Details 两个页面, 首页为 Home页, 用过 Home 页可跳转到 Details 页, 在 Details 可返回或者继续跳转. 在创建页面时候, 可以对当前页面的导航进行设置, 可设置对应的标题、字体、字体颜色、背景色等.

• Home

class HomeNav extends React.Component {
  static navigationOptions = {
    title: 'Home',
    headerStyle: {
      backgroundColor: '#f4511e'
    },
    headerTintColoe: '#fff',
    headerTitleStyle: {
      fontSize: 30,
      color: 'blue',
      fontWeight: 'bold'
    }
  }

  render() {
    return(
      <View style={styles.homeStyle}>
        <Text style = {styles.homeTextStyle}>Home Screen</Text>
        <Button 
          style = {styles.homeBtnStyle}
          title = "Go to detail"
          onPress = {() => this.props.navigation.navigate('Details')}
        />
      </View>
    )
  }
}

• Detail

class DetailsScreen extends React.Component {
  constructor(props){
    super(props)
    this.state = {}
  }

  static navigationOptions = {
    title: 'Details',
    headerStyle: {
      backgroundColor: 'red'
    }
  }

  render() {
    return(
      <View style = {styles.detailStyle}>
        <Text style={styles.detailsTextStyle}>Detail Screen</Text>
        <Button
          title = "Go to details again"
          onPress = { () => this.props.navigation.push('Details')}
        />
        <Button
          title = "Go to home"
          onPress = { () => this.props.navigation.navigate('Home')}
        />
        <Button
          title = "Go back"
          onPress = { 
            () => {
              Alert.alert(
                `Title`,
                'are you sure go back?',
                [
                  {text: '确定', onPress: () => this.props.navigation.goBack()},
                  {text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}
                ]
              )
            }
          }
        />
      </View>
    )
  }
}

4. 声明类

要使用类之间的跳转, 则需要首先声明对应的类

const RootStack = createStackNavigator(
  {
    Home: HomeNav,
    Details: DetailsScreen
  }
)

5. 调用导航

React Native 中需要在 return 中返回对应的组件, 这里返回导航控制器.

export default class App extends Component {
  render(){
    return(<RootStack />)
  }
}

到这里, 基于 React Navigation 的导航控制器就完成了, 想看详细代码和运行效果的可到GitHub下载代码: https://github.com/YTiOSer/YTReact-Native_Navigation, 里面有完整的代码.

您的支持是我的动力, 如果对您有所帮助的话, 不妨给个喜欢和关注哈!