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

Question

I'm new to React Native. And for some practice, I'm doing an app. I want to navigate between components while keeping the bottom navigation still.

I used the logic of the BottomNavigation from https://callstack.github.io/react-native-paper/bottom-navigation.html .

Here is what I've done in MyComponent.js which holds Friend component and Chat component:

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"}}
     />
    );
  }
}

My Router.js file is like this:

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;

In addition to that let's say we have a component named "FriendDetail". When a friend is clicked in Friend component, it will be navigated to FriendDetail component. Although FriendDetail is not in the SceneMap of the MyComponent.js, I want to show the MyComponent in the bottom. How should i do this?

Answer 1

here is react-native-router-flux bottom navigation an example here is my App.js ( every page in this file)

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;

also, I have a TabIcon class like this it generates each page icons

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;

and I can call like this mean page1 login and tabbar my application other pages in bottom navigations

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