如何在保持底部导航的同时在组件之间导航？

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>
    )
  }
}