Как перемещаться между компонентами, сохраняя при этом нижнюю навигацию?

Question

Я новичок в React Native.И для некоторой практики я делаю приложение.Я хочу перемещаться между компонентами, сохраняя при этом нижнюю навигацию.

Я использовал логику BottomNavigation из https://callstack.github.io/react-native-paper/bottom-navigation.html.

Вот что я сделал в 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 отсутствует в SceneMap файла MyComponent.js, я хочу показать MyComponent внизу.Как мне это сделать?

Answer 1

Вот пример реакции нижнего уровня реакции-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;

и я могу называть это как «страница 1», вход в систему и вкладка моего приложения, другие страницы в нижней части навигации

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