リアクトナビゲーションを使用する手順の詳細な説明

今回は、react-navigation を使用する手順について詳しく説明します。react-navigation を使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。

1. 主なコンポーネント

使用形態に応じて主に 3 つの部分に分かれます:

1. StackNavigator: 通常の Navigator と同様、画面上部のナビゲーション バー

2. TabNavigator: iOS の TabBarController に相当、画面下のタブ バー

3. DrawerNavigator: 引き出し効果、横からスライドアウト

2. 1 を使用して新しいプロジェクトを作成します

react-native init ComponentDemo

2. このライブラリをアプリケーションにインストールします

npm install --save react-navigation

インストール完了 ベータ版(v1.0.0～beta.7)であることが分かりましたが、落とし穴が!?この落とし穴については後ほど詳しく説明します~

3. TabNavigator、StackNavigator、DrawerNavigator をテストします

(1) 新しい HomePage.js を作成します

import React from 'react';
import {
  StyleSheet,
  View,
  Text,
  Button,
  Image
} from 'react-native';
import {
  StackNavigator,
  TabNavigator
} from 'react-navigation';
import ChatScreen from './ChatScreen';
import MinePage from './MinePage';
class HomePage extends React.Component{
  static navigationOptions={
    title: '首页',//设置标题内容
    header:{
      backTitle: ' ',//返回按钮标题内容（默认为上一级标题内容）
    }
  }
  constructor(props) {
    super(props);
  }
  render() {
    const {navigate} = this.props.navigation;
    return (
      <view>
        <text>Hello, Navigation!</text>
        <button> navigate('Chat',{user:'Sybil'})}
          title="点击跳转"/>
      </button></view>
    )
  }
}
const MainScreenNavigator = TabNavigator({
  Home: {
    screen: HomePage,
    navigationOptions: {
      tabBar: {
        label: '首页',
        icon: ({tintColor}) => (
          <image></image>
        ),
      },
    }
  },
  Certificate: {
    screen: MinePage,
    navigationOptions: {
      tabBar: {
        label: '我的',
        icon: ({tintColor}) => (
          <image></image>
        ),
      },
    }
  },
}, {
  animationEnabled: false, // 切换页面时不显示动画
  tabBarPosition: 'bottom', // 显示在底端，android 默认是显示在页面顶端的
  swipeEnabled: false, // 禁止左右滑动
  backBehavior: 'none', // 按 back 键是否跳转到第一个 Tab， none 为不跳转
  tabBarOptions: {
    activeTintColor: '#008AC9', // 文字和图片选中颜色
    inactiveTintColor: '#999', // 文字和图片默认颜色
    showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
    indicatorStyle: {height: 0}, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了
    style: {
      backgroundColor: '#fff', // TabBar 背景色
    },
    labelStyle: {
      fontSize: 12, // 文字大小
    },
  },
});
const styles = StyleSheet.create({
  container:{
    flex: 1,
    backgroundColor:'#fff'
  },
  icon: {
    height: 22,
    width: 22,
    resizeMode: 'contain'
  }
});
const SimpleApp = StackNavigator({
  Home: {screen: MainScreenNavigator},
  Chat:{screen:ChatScreen},
});
export default SimpleApp;

(2) 新しい ChatScreen.js を作成します

import React from 'react';
import {
  Button,
  Image,
  View,
  Text
} from 'react-native';
class ChatScreen extends React.Component {
  static navigationOptions = {
    title:'聊天',
  };
  render() {
    const {params} = this.props.navigation.state;
    return (
    <view>
      <text>Chat with {params.user}</text>
    </view>
    );
  }
}
export default ChatScreen;

(3) を作成します新しい MinePage.js

import React,{Component} from 'react';
import {
  Button,
  Image,
  View,
  Text,
  StyleSheet
} from 'react-native';
import {
  DrawerNavigator
} from 'react-navigation';
import MyNotificationsScreen from './MyNotificationsScreen';
class MinePage extends Component{
  static navigationOptions = {
     title:'我的',
     drawerLabel: '我的',
    // Note: By default the icon is only shown on iOS. Search the showIcon option below.
     drawerIcon: ({ tintColor }) => (
     <image></image>
   ),
  };
  render(){;
    return(
      <view>
        <text>Sybil</text>
        <button> this.props.navigation.navigate('DrawerOpen')}
         title="点击打开侧滑菜单"
        />
      </button></view>
    );
  }
}
const styles = StyleSheet.create({
  icon: {
    width: 24,
    height: 24,
  },
});
const MyChatNavigator = DrawerNavigator({
  MyChat: {
    screen: MinePage,
  },
  Notifications: {
    screen: MyNotificationsScreen,
  },
},{
  drawerWidth: 220, // 抽屉宽
  drawerPosition: 'left', // 抽屉在左边还是右边
  // contentComponent: CustomDrawerContentComponent, // 自定义抽屉组件
  contentOptions: {
    initialRouteName: MinePage, // 默认页面组件
    activeTintColor: '#008AC9', // 选中文字颜色
    activeBackgroundColor: '#f5f5f5', // 选中背景颜色
    inactiveTintColor: '#000', // 未选中文字颜色
    inactiveBackgroundColor: '#fff', // 未选中背景颜色
    style: { // 样式
    }
  }
});
export default MyChatNavigator;

(4) MyNotificationsScreen.js

import React from 'react';
import {
  StyleSheet,
  View,
  Text,
  Button,
  Image
} from 'react-native';
class MyNotificationsScreen extends React.Component {
  static navigationOptions = {
    title:'通知',
    drawerLabel: '通知',
    drawerIcon: ({ tintColor }) => (
      <image></image>
    ),
  };
  render() {
    return (
       <view>
        <button> this.props.navigation.navigate('DrawerOpen')}
          title="点击打开侧滑菜单"
        />
        <button> this.props.navigation.goBack()}
          title="返回我的界面"
        />
      </button></button></view>
    );
  }
}
const styles = StyleSheet.create({
  tabIcon: {
    width: 24,
    height: 24,
  },
});
export default MyNotificationsScreen;

を作成します (5)

を実行してエラーを報告しますか?これが先ほどの穴です〜

その理由は何でしょうか？ベータ版のバグであることが判明しました。ディレクトリ内のnode_modules/react-navigation/src/views/Header.jsの12行目を見つけて削除すればOKです~

追記:残念ながら削除してしまいました。このエラーの写真は残さないでください~ この記事を公開しようとしている時点で、最新バージョンは (v1.0.0-beta.9) に変更されており、最新バージョンでは上記のバグが修正されています。

それでは、もう一度実行してみます~

最後の動的レンダリング:

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語に関する他の関連記事に注目してください。 Webサイト！

推奨読書:

Vueマルチレベルコンポーネントのprovide/injectの使用方法の詳細な説明

Vueの親子コンポーネント値の転送とスロット適用手順の詳細な説明

以上がリアクトナビゲーションを使用する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。