时间戳

首页 > 解决方案 > 如何从 .js 文件中获取标签栏和底栏信息？

reactjs - 如何从 .js 文件中获取标签栏和底栏信息？

问题描述

我的主屏幕中有一个顶部栏和底部栏。我想要做的是我有一个对象，称之为 routeNames.js 。我希望房间名称作为我的顶部栏导航器，并将房间项目（笔记本电脑、电视等）作为底部栏导航器。

我只是在没有使用 routeNames.js 数据的情况下完成了它，但我想通过使用数据来完成它，并创建我的导航器。另一个问题是如何在底部导航器中有更大的图标？现在看起来好小

这是我的项目现在的样子：在此处输入图像描述

HomeScreen.js

import React from "react";
import { Text, View  } from "react-native";
import roomsList from "../routeNames";

import LivingRoom from "../rooms/LivingRoom";
import Kitchen from "../rooms/Kitchen";
import Bathroom from "../rooms/Bathroom";

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';

const TabTop = createMaterialTopTabNavigator();


function HomeScreen() {
  return (
      <TabTop.Navigator>
        <TabTop.Screen name="Livingroom" component={LivingRoom} />
        <TabTop.Screen name="Kitchen" component={Kitchen} />
        <TabTop.Screen name="Bathroom" component={Bathroom} />

      </TabTop.Navigator>
    
  );
}

export default HomeScreen;

客厅.js

import React from "react";
import { Text, View, Image, StyleSheet } from "react-native";
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Kitchen from "./Kitchen";
import Bathroom from "./Bathroom";

const TabBottom = createBottomTabNavigator();

export default LivingRoom = () => {
  return(
    <View>
      <Image 
        source={require('../assets//images//livingroom.jpg')} 
        style={styles.image}
        
      />    
      <TabBottom.Navigator>
        <TabBottom.Screen name="LivingRoom" component={Bathroom} />
        <TabBottom.Screen name="Kitchen" component={Kitchen} />
      </TabBottom.Navigator>

    </View>
    
  )
}

const styles = StyleSheet.create({
  image: {
    height:450,
    width:400,
    marginRight:10,
    marginLeft:10,   

  }
})

routeNames.js

export default roomsList = {
  livingroom: {
    "tv":true,
    "laptop": true,
    "air-conditioner":true,
  },
  kitchen: {
    "fridge":true,
    "dining-table": true,
  },
  gameroom: {
    "computer":true,
    "headphones":true,
    "microphone":true,
    "cd-player":true,
  }
}

标签： reactjsreact-native

解决方案

你可以改成roomsList这样：

const roomsList = {
  livingroom: {
    TV: TV, // The value here is a component  
    LAPTOP: Laptop,
    AC: AirConditioner,
  },
  // Other rooms...
};

这里的每个键值对都livingroom标识了一个底部选项卡屏幕。

您可以对 中的其他房间重复相同的想法roomsList。

这种方式LivingRoom可能看起来像这样：

const LivingRoom = () => {
  return (
    <View>
      <TabBottom.Navigator>
        {Object.keys(roomsList.livingroom).map(room => {
          return (
            <TabBottom.Screen
              name={room}
              component={roomsList.livingroom[room]}
            />
          );
        })}
      </TabBottom.Navigator>
    </View>
  );
};

对于对象中的每个键值对，我们在组件livingroom中呈现一个底部选项卡。LivingRoom其中键对应于屏幕的名称，值对应于屏幕要渲染的组件。

您还可以通过循环键来扩展这个想法，roomsList以动态呈现顶部选项卡屏幕。即对于每个房间，roomsList我们渲染一个顶部选项卡，对于每个顶部选项卡，我们渲染一个或多个底部选项卡。

要更改选项卡标签的字体大小，您可以tabBarOptions在底部选项卡导航器上设置道具：

tabBarOptions={{
  labelStyle: {
    fontSize: 15,
    padding: 10,
  },
}}

推荐阅读