Demo cơ bản

Thư viện định tuyến chính thức của React Native: https://reactnavigation.org

Cách cài đặt react-native-router-flux có thể xem trên trang chủ. Dưới đây là mã nguồn minh họa:

const AppRoot = () => {
  return (
    <Router>
      {/* Tất cả các trang đều được khai báo trong Router */}
      <Scene key="main">
        {/* key: định danh trang, dùng bởi Actions */}
        {/* component: component tương ứng với trang */}
        {/* title: tiêu đề hiển thị trên navbar */}
        {/* initial: trang mặc định khi khởi động */}
        <Scene
          key="first"
          component={FirstPage}
          title="Trang 1"
          initial={true}
        />
        <Scene key="second" component={SecondPage} title="Trang 2" />
      </Scene>
    </Router>
  );
};

Trong FirstPage, khi nhấn vào Text sẽ chuyển sang màn hình khác:

// Import Actions để xử lý chuyển trang
import { Actions } from 'react-native-router-flux';

const FirstPage = () => {
  return (
    <View style={styles.container}>
      <Text
        style={styles.welcome}
        onPress={() => Actions.second()}
      >
        Nhấn vào đây để đi đến Trang 2
      </Text>
    </View>
  );
};

Mã cho SecondPage:

export default class SecondPage extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Đây là Trang 2</Text>
      </View>
    );
  }
}

Truyền dữ liệu và làm mới trang

Khi chuyển trang, thường cần truyền dữ liệu giữa các màn hình. Thư viện hỗ trợ làm mới trực tiếp trang hiện tại.

Thêm trang thứ ba (ThirdPage) để minh họa truyền dữ liệu:

import { Actions } from "react-native-router-flux";

const ThirdPage = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.welcome}
        // Actions.pop quay lại trang trước đó
        onPress={() => Actions.pop({
          refresh: {
            data: 'Dữ liệu từ Trang 3 gửi về Trang 2'
          }
        })}
      >Nhấn để quay lại và gửi dữ liệu</Text>
    </View>
  );
};

Cập nhật SecondPage để nhận dữ liệu:

import { Actions } from 'react-native-router-flux'; // Thêm import

export default class SecondPage extends Component {
  render() {
    const receivedData = this.props.data || "null";
    return (
      <View style={styles.container}>
        <Text
          style={styles.welcome}
          onPress={() => Actions.third({ data: "Từ Trang 2 gửi sang Trang 3" })}
        >Nhấn để chuyển đến Trang 3</Text>
        <Text style={styles.refresh}>
          Dữ liệu nhận được: {receivedData}
        </Text>
      </View>
    );
  }
}

Cuối cùng, thêm Scene cho ThirdPage trong AppRoot:

const AppRoot = () => {
  return (
    <Router>
      <Scene key="main">
        {/* ... các Scene trước đó ... */}
        <Scene
          key="third"
          component={ThirdPage}
          title="Trang 3"
        />
      </Scene>
    </Router>
  );
};

Khi quay lại từ ThirdPage về SecondPage, dữ liệu được truyền và trang tự động làm mới. Nếu muốn làm mới trực tiếp mà không cần chuyển trang, sử dụng Actions.refresh:

export default class SecondPage extends Component {
  render() {
    const receivedData = this.props.data || "null";
    return (
      <View style={styles.container}>
        <Text
          style={styles.welcome}
          onPress={() => Actions.third({ data: "Từ Trang 2 sang Trang 3" })}
        >Chuyển sang Trang 3</Text>
        <Text
          style={styles.refresh}
          onPress={() => Actions.refresh({
            data: 'Dữ liệu đã được cập nhật',
          })}
        >Làm mới: {receivedData}</Text>
      </View>
    );
  }
}

Tab Scene (Thanh điều hướng tab)

Đặt thuộc tính Tabs cho Scene để tạo giao diện tab, thường dùng trong ứng dụng.

// Component hiển thị icon tab (màu sắc thay đổi khi được chọn)
const TabIcon = ({ focused, title }) => {
  return (
    <Text style={{ color: focused ? '#007AFF' : '#8E8E93' }}>{title}</Text>
  );
};

const AppRoot = () => (
  <Router>
    {/* hideNavBar ẩn thanh điều hướng mặc định; tabBarPosition đặt tab ở dưới */}
    <Scene hideNavBar tabBarPosition="bottom">
      <Tabs
        key="tabBar"
        swipeEnabled
        wrap={false}
        showLabel={false} // Ẩn nhãn dưới icon
        tabBarStyle={{ backgroundColor: '#F5F5F5' }}
        activeBackgroundColor="#FFFFFF"
        inactiveBackgroundColor="#C7C7CC"
      >
        <Scene
          key="first"
          icon={TabIcon}
          component={FirstPage}
          title="Trang 1"
        />
        <Scene
          key="second"
          icon={TabIcon}
          component={SecondPage}
          title="Trang 2"
        />
        <Scene
          key="third"
          icon={TabIcon}
          component={ThirdPage}
          title="Trang 3"
        />
      </Tabs>
    </Scene>
  </Router>
);

Khi chạy, ứng dụng sẽ hiển thị ba tab ở phía dưới màn hình.