时间戳

首页 > 解决方案 > React Native，Native 底部选项卡单击选项卡并仅在母版页内容区域内加载该屏幕

react-native - React Native，Native 底部选项卡单击选项卡并仅在母版页内容区域内加载该屏幕

问题描述

我正在开发一个测试应用程序react-native。我正在使用native-base组件。对于底部标签导航，我使用的是createBottomTabNavigatorfrom react-navigation/bottom-tabs。

我想在整个应用程序中保持应用程序的页眉和页脚（这包含底部选项卡）通用。两者之间的内容应基于单击的底部选项卡动态/有条件地加载屏幕。

假设，在底部选项卡上单击 Screen1，Home.js内容区域应该被填充Screen1.js等等。我不知道每次按下底部选项卡时如何打开Home.js，然后在里面Home.js有条件地渲染。以下是我的代码片段。Screen1.js<Content>

主页.js

import React, { Component } from "react";
import { createAppContainer } from "react-navigation";
import {
  Button,
  Text,
  Icon,
  Footer,
  FooterTab,
  Root,
  Container,
  Header,
  Body,
  Title,
  Right,
  Content,
} from "native-base";
import Screen1 from "../screen/Screen1.js";
import { createBottomTabNavigator } from "react-navigation-tabs";
import { StyleSheet } from "react-native";
import Screen2 from "./Screen2.js";
import Screen3 from "./Screen3.js";
import Screen4 from "./Screen4.js";
const Tabnav = createBottomTabNavigator(
  {
    Screen1: { screen: Screen1},
    Screen2: { screen: Screen2},
    Screen3: { screen: Screen3},
    Screen4: { screen: Screen4},
  },
  {
    tabBarPosition: "bottom",
    tabBarComponent: (props) => {
      return (
        <Footer>
          <FooterTab>
            <Button
              style={{
                justifyContent: "space-evenly",
              }}
              vertical
              active={props.navigation.state.index === 0}
              onPress={() => props.navigation.navigate("Screen1")}
            >
              <Icon name="eye" />
              <Text style={styles.footerTextSize}>Screen1</Text>
            </Button>
            <Button
              vertical
              active={props.navigation.state.index === 1}
              onPress={() => props.navigation.navigate("Screen2")}
            >
              <Icon name="clipboard" />
              <Text style={styles.footerTextSize}>Screen2</Text>
            </Button>
            <Button
              vertical
              active={props.navigation.state.index === 2}
              onPress={() => props.navigation.navigate("Screen3")}
            >
              <Icon name="calculator" />
              <Text style={styles.footerTextSize}>Screen3</Text>
            </Button>
            <Button
              vertical
              active={props.navigation.state.index === 3}
              onPress={() => props.navigation.navigate("Screen4")}
            >
              <Icon name="person" />
              <Text style={styles.footerTextSize}>Screen4</Text>
            </Button>
          </FooterTab>
        </Footer>
      );
    },
  }
);
const styles = StyleSheet.create({
  footerTextSize: {
    fontSize: 10,
  },
});
const AppContainer = createAppContainer(Tabnav);
const Home = () => {
  return (
    <Root>
      <Container>
        <Header>
          <Body>
            <Title>Demo Multi Tab</Title>
          </Body>
          <Right>
            <Button transparent>
              <Icon name="menu"></Icon>
            </Button>
          </Right>
        </Header>
        <Content style={{ backgroundColor: "red" }}>
            //THIS IS WHERE I FIND IT DIFFICULT TO LOAD SCREEN
            //BASED ON FOOTER TAB CLICKED
            {{if(props.navigation.state.index==0)}}{<Scree1></Screen1>}
        </Content>
        <Footer>
          <AppContainer></AppContainer>
        </Footer>
      </Container>
    </Root>
  );
};
export default Home;

Screen1.js

import { Container, H1, Root } from "native-base";
import React, { Component } from "react";
export default class Screen2 extends Component {
  render() {
    return (
      <Root>
        <Container>
          <H1>Screen1</H1>
        </Container>
      </Root>
    );
  }
}

Screen2.js

import { Container, H1, Root } from "native-base";
import React, { Component } from "react";
export default class Screen2 extends Component {
  render() {
    return (
      <Root>
        <Container>
          <H1>Screen2</H1>
        </Container>
      </Root>
    );
  }
}

应用程序.js

import React from "react";
import AppLoading from "expo-app-loading";
import { Container, Text } from "native-base";
import * as Font from "expo-font";
// import { Ionicons } from "@expo/vector-icons";
import Home from "./screen/Home";

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isReady: false,
    };
  }

  async componentDidMount() {
    await Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
      Ionicons: require("native-base/Fonts/Ionicons.ttf"),
    });
    this.setState({ isReady: true });
  }

  render() {
    if (!this.state.isReady) {
      return <AppLoading />;
    }

    // return <Login></Login>;
    return <Home></Home>;
  }
}

让我知道如何在代码片段上方进行编码，以便在底部选项卡上单击屏幕，在母版页<Content>标签内打开，以及页眉、页脚等其他详细信息在整个应用程序中保持不变而无需复制。

标签： react-nativenative-basereact-navigation-bottom-tab

解决方案

推荐阅读