Navagation navigation

1. preparation

To be in React-Native Using navigation in , You need to import the corresponding library in the project in advance , React-Native Several existing navigation components in : React Navigation 、 NavigatorIOS 、Navigator, If you're new to it , So direct choice React Navigation Just fine . If you only aim at iOS Platform development , And want to be consistent with the native appearance of the system , Then you can choose NavigatorIOS . and Navigator This is the earliest component , Has been gradually React Navigation replace , But it has been practiced for a long time , More stable . Now the more widely used cutting general is React Navigation, This article will explain the use of this component in detail .

• Enter the project through the terminal , Then add react-navigation.

• Then introduce... Into the project React Navigation.

import { createStackNavigator } from 'react-navigation';

2. Import the controls used

In this project, because it is navigation , So it involves View、Button、Alert etc. .

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

3. Create two pages to jump to

Here to create Home and Details Two pages , The home page is Home page , Used to Home Page can jump to Details page , stay Details You can return or continue to jump . When creating a page , You can set the navigation of the current page , The corresponding title can be set 、 typeface 、 The font color 、 Background color, etc .

• 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: ' determine ', onPress: () => this.props.navigation.goBack()},
                  {text: ' Cancel ', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}
                ]
              )
            }
          }
        />
      </View>
    )
  }
}

4. Declaration class

To use a jump between classes , You need to declare the corresponding class first

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

5. Call navigation

React Native Need to be in return Return the corresponding component in , Return to the navigation controller .

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

Come here , be based on React Navigation The navigation controller is complete