Reac Native入門技法三

我是綠色大米呀發表於2019-02-26

第三篇，說一說頁面跳轉與傳值。
react-navigation元件使用來做頁面跳轉的。
使用下面的命令進行安裝。

npm install --save react-navigation
複製程式碼

兩個頁面分別寫在兩個js檔案中，第一個是index.android.js,第二個頁面是Profile.js

xx.png

首先是index.android.js

import React, { Component } from `react`;
import {
  AppRegistry,
  StyleSheet,
  Button
} from `react-native`;

import ProfileScreen from `./Profile.js`;

import {
  StackNavigator,
} from `react-navigation`;



export default class debug extends Component {
  static navigationOptions = {
    title: `1`,
  };
  render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Go to 2 page"
        onPress={() => navigate(`Profile`, { user: `Lucy` })}
      />
    );
  }

}
const App = StackNavigator({
  Main: { screen: debug },
  Profile: { screen: ProfileScreen },
});
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: `center`,
    alignItems: `center`,
    backgroundColor: `#F5FCFF`,
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
});


AppRegistry.registerComponent(`debug`, () => App);
複製程式碼

首先需要引入第二個頁面和react-navigation元件。

import ProfileScreen from `./Profile.js`;

import {
  StackNavigator,
} from `react-navigation`;
複製程式碼

然後宣告頁面

const App = StackNavigator({
  Main: { screen: debug },
  Profile: { screen: ProfileScreen },
});
複製程式碼

debug就是第一個頁面，ProfileScreen 是第二個頁面。

再然後是註冊App

AppRegistry.registerComponent(`debug`, () => App);
複製程式碼

這裡要注意的是`debug`是應用的名字，後面的App是StackNavigator物件。

頁面的跳轉與傳值

render() {
    const { navigate } = this.props.navigation;
    return (
      <Button
        title="Go to 2 page"
        onPress={() => navigate(`Profile`, { user: `Lucy` })}
      />
    );
  }
複製程式碼

在Profile.js中取到傳遞的值

import React, { Component } from `react`;
import {
  AppRegistry,
  StyleSheet,
  Alert,
  Text
} from `react-native`;
export default class Profile extends Component {

  static navigationOptions = {
    title: `2`,
  };
  render() {
     const { params } = this.props.navigation.state;
    return (
      <Text>{params.user}This is 2 Page</Text>
    );
  }

}
複製程式碼

到此一個簡單的頁面跳轉與傳值就完成了。

相關文章