如何在保持底部導航的同時在組件之間導航？

Question

我是React Native的新手。 對於某些練習，我正在做一個應用程序。 我想在組件之間導航，同時保持底部導航。

我使用了來自https://callstack.github.io/react-native-paper/bottom-navigation.html的BottomNavigation的邏輯。

這是我在MyComponent.js中所做的，它包含了Friend組件和Chat組件：

import * as React from 'react';
import { BottomNavigation, Text } from 'react-native-paper';
import Friend from './friend';
import Chat from './chat';

export default class MyComponent extends React.Component {
  state = {
    index: 0,
    routes: [
      { key: 'friend', title: 'Friend', icon: 'accessibility' },
      { key: 'chat', title: 'Chat', icon: 'message' },
    ],
  };

  _handleIndexChange = index => this.setState({ index });

  _renderScene = BottomNavigation.SceneMap({
    friend: Friend,
    chat: Chat,
  });

  render() {
    return (
      <BottomNavigation
        navigationState={this.state}
        onIndexChange={this._handleIndexChange}
        renderScene={this._renderScene}
        barStyle={{backgroundColor:"#00b5ec"}}
     />
    );
  }
}

我的Router.js文件是這樣的：

import React from 'react';
import {Scene,Router,Stack} from 'react-native-router-flux';
import MyComponent from './components/myComponent';


const ReactRouter = () => {
    return (
        <Router>
            <Scene key="Pages">
            <Scene key="MyComponent" component={MyComponent} hideNavBar={true} panHandlers={null} ></Scene> 
            </Scene>
        </Router>
    );
}

export default ReactRouter;

除此之外，假設我們有一個名為“FriendDetail”的組件。 當朋友在Friend組件中單擊時，它將被導航到FriendDetail組件。 雖然FriendDetail不在MyComponent.js的SceneMap中，但我想在底部顯示MyComponent。 我該怎么辦？

Answer 1

這里是react-native-router-flux底部導航這里的一個例子是我的App.js（這個文件中的每一頁）

import React, { Component } from "react";
import { Router, Scene,Actions } from "react-native-router-flux";
import ... pages/screens/components

class App extends Component {


render(){
  return (
    <Router>
      <Scene key="root" >

        <Scene key="page1" component={PAGE_1} />

        <Scene
          key="tabbar"
          swipeEnabled
          tabBarPosition="bottom"
          tabs
          hideNavBar
          type="reset"
          titleStyle={{ color: "red" }}
          tabBarStyle={{ backgroundColor:"blue" , padding: 5 }}
        >

          <Scene
           type="reset"
            key="tabPage1"
            component={TAB_ITEM_1}
            title=TAB_ITEM_1
            icon={TabIcon}
            iconName="home"
            hideNavBar
          />

         <Scene
           type="reset"
            key="tabPage1"
            component={TAB_ITEM_1}
            title=TAB_ITEM_1
            icon={TabIcon}
            iconName="home"
            hideNavBar
          />
          <Scene
           type="reset"
            key="tabPage1"
            component={TAB_ITEM_1}
            title=TAB_ITEM_1
            icon={TabIcon}
            iconName="home"
            hideNavBar
          />

        </Scene>

      </Scene>
    </Router>
  )

}
}
export default App;

另外，我有一個這樣的TabIcon類，它會生成每個頁面圖標

import React, { Component } from "react";
import { Text, View } from "react-native";
import {Icon} from 'react-native-elements'; // you can use other libs
import colors from './resource/colors';
function TabIcon(props) {
    return (
    <View style={styles.wrapper}>
      <View style={styles.container}>
        <Icon
           color={colors.t_white_dark}
           name={props.iconName}
           size={30}
          />
      </View>
    </View>
    )
  }

  const styles = {
    container: {
      width: 48,
      height: 42,
      padding: 5,
      justifyContent: 'center',
      alignItems: 'center',
    }
  };

  export default TabIcon;

我可以這樣調用這意味着page1登錄和tabbar我的應用程序其他頁面在底部導航

import React, { Component } from 'react'
import { Text, View } from 'react-native'
import { Actions } from 'react-native-router-flux';

export default class page1 extends Component {
  goTab1(){
    Actions.tabbar_bottom(); // it's render first item in tab stack
  }
  render() {
    return (
      <View>
        <Text> page1 </Text>
      </View>
    )
  }
}