Navagation导航

1.准备工作

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

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

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

代码语言：javascript复制

import { createStackNavigator } from 'react-navigation';

2.导入用到的控件

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

代码语言：javascript复制

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

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

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

• Home

代码语言：javascript复制

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

代码语言：javascript复制

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. 声明类

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

代码语言：javascript复制

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

5. 调用导航

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

代码语言：javascript复制

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

到这里, 基于 React Navigation 的导航控制器就完成了

reactnative

0 人点赞