リアクションナビゲーションメソッドの使い方-フロントエンドQ&A-php.cn

リアクションナビゲーションメソッドの使い方

藏色散人

リリース： 2023-01-04 16:42:11

オリジナル

2348 人が閲覧しました

反応ナビゲーションは、登録されているすべてのルーティングページのプロパティにナビゲーションを挿入します。使用方法: 1. "const Main = createStackNavigator({...})" を通じてメインルートを作成します。 2. " createBottomTabNavigator" "下部のタブバーを作成します。 3. 「createSwitchNavigator」などで特別なスイッチルートを作成します。

リアクションナビゲーションメソッドの使い方

このチュートリアルの動作環境: Windows 10 システム、react18.0.0 バージョン、Dell G3 コンピューター。

反応ナビゲーションメソッドの使用方法?

react-navigation 共通メソッド

react-navigation は rn プロジェクトで使用されるルーティングマネージャーであり、ルーティング履歴管理の提供に加えて、ナビゲーター UI コンポーネントもあります。 ;

react-navigation は、登録されているすべてのルーティングページのプロパティにナビゲーションを挿入します!!!

1. メインルートを作成します;

createStackNavigator

基本的にプロジェクトで使用されるすべてのページルーティングが含まれます;

const Main = createStackNavigator({
    Tab: {
        screen: Tab,
        navigationOptions:{
            header:null
        }
    }
     。。。
},{
    initialRouteName :&#39;Tab&#39;,   
})

ログイン後にコピー

2. 下部のタブバーを作成します;

createBottomTabNavigator

つまり、プロジェクトの下部にあるいくつかのタブページングです。アプリのホームページ

const Tab = createBottomTabNavigator({
    Home: {
        screen: Home,
        navigationOptions:{
            header:null,
            title:&#39;最热&#39;,
            tabBarIcon:({focused,tintColor})=>{
                return (
                    <MCIcon name="chili-hot"  size={16} color = {focused?tintColor:&#39;#404040&#39;}></MCIcon>
                )
            }    
        }
    },
   。。。
},{
    initialRouteName :&#39;Home&#39;,
    tabBarOptions:{
        activeTintColor:&#39;#1d85d0&#39; 
    }
})

ログイン後にコピー

3. 特別な切り替えルートを作成します。ジャンプ前のページは履歴スタックに入りません。

createSwitchNavigator
//欢迎页跳转不可返回
const Navigation = createSwitchNavigator({
    Init:Init,
    Main:Main
},{
    initialRouteName :&#39;Init&#39;
})

ログイン後にコピー

4. ナビゲーションバーを占めるトップタブページのラベルを作成します。 Position

createMaterialTopTabNavigator
export default class Home extends Component {
  render() {
    const TabNav = createMaterialTopTabNavigator({
      Tab1:{
        screen: Tab1,
        navigationOptions:{
            title:&#39;tab1&#39;,
            header:null
        }
      }
。。。
   
    },{。。。}) 
    return (
      <TabNav/>
    ) 
  }
}

ログイン後にコピー

5.navigationOptions一般的に使用される構成プロパティ

headerTtile: ページのタイトル

headerTitleStyle: タイトルテキストのスタイル

headerStyle: タイトルブロック全体のスタイル

6 .tab パーツの参照属性

tabBarOptions - 具有以下属性的对象:
activeTintColor -活动选项卡的标签和图标颜色。
activeBackgroundColor -活动选项卡的背景色。
inactiveTintColor -"非活动" 选项卡的标签和图标颜色。
inactiveBackgroundColor -非活动选项卡的背景色。
showLabel -是否显示选项卡的标签, 默认值为 true。
showIcon - 是否显示 Tab 的图标，默认为false。
style -选项卡栏的样式对象。
labelStyle -选项卡标签的样式对象。
tabStyle -选项卡的样式对象。
allowFontScaling -无论标签字体是否应缩放以尊重文字大小可访问性设置，默认值都是 true。
safeAreaInset - 为 <SafeAreaView> 组件重写 forceInset prop， 默认值：{ bottom: &#39;always&#39;, top: &#39;never&#39; }； top | bottom | left | right 的可选值有： &#39;always&#39; | &#39;never&#39;。

ログイン後にコピー

BottomTabBar コンポーネントもこの属性を使用できます

7. Make return function

通常はこれを使用します返される必要があるページ上の .props .navigation はナビゲーション props オブジェクトを取得します;

ページに戻るには

this.props.navigation.goBack()

ログイン後にコピー

を使用できますが、その前提条件は this.props です。 .navgation は現在のページのナビゲーションである必要があります。つまり、この .props.navigation.state.routeName を表示して次のことを判断できます:

Android のリターンキーのリターン判定などの特殊な場合の場合、ロールバックイベント BackHandler が上向きに渡されるため、戻りイベントがページ上でキャプチャされない可能性があります。その場合、 this.props.navigation はロールバックする必要があるナビゲーションオブジェクトではない可能性があるため、 go.Back() を使用することはできません。成功するか、場合によっては、ナビゲーションオブジェクトに goBack() メソッドがない可能性があります。この問題が発生します。

例:

ホームページは第 1 レベルのルートであり、詳細ページは第 2 レベルのルートであり、両方のページに BackHandler コールバック関数があります。詳細に BackHandler がない場合、現在のページによってキャプチャされた場合は、ホームの BackHandler コールバック関数に渡されます。その後、this.props.navigation が返されます。 home は詳細ではなくホームページを参照するため、goBack の呼び出しは成功しません。！！

解決策:

NavigationActions を使用する;

すべての NavigationActions は、navigation.dispatch() メソッドを使用してルーターに送信できるオブジェクトを返します。

次の操作をサポートします。

Navigate - 別のルートに移動します。

Back - 前の状態に戻ります。

Set Params - パラメータを設定します。指定されたルートパラメータ

Init - 状態が未定義の場合に最初の状態を初期化するために使用されます

詳細についてはドキュメントを参照してください: https://reactnavigation.org/docs/zh-Hans/navigation- events.html

パス: