Question

我正在制作自己的自定义底部导航栏，因此无法在其View组件上应用样式

这就是我要导入的

import React, {PureComponent} from 'react';
import {StyleSheet, View, Text} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';

然后作为渲染的回报，我这样称呼它（this.something是图标）

  <View styles={headerContainer1}> 
            <Text> {this.News}</Text>
            <Text>{this.home}</Text>
            <Text> {this.Exchange}</Text>
            <Text> {this.about}</Text>
            </View>

这是我的Header容器的外观，并且来自这里

const styles = StyleSheet.create({
    headerContainer1 : {
      display: "flex",
      flexDirection: "row",
      alignItems: 'center',
      backgroundColor: "red",
      borderBottomLeftRadius: 0,
      borderBottomRightRadius: 0
    }
  })

  const { 
    headerContainer1
  } = styles;

在这里，我做了两件事。 flexDirection: "row",和backgroundColor: "red"，但很遗憾，我看不到正在应用任何更改。

[问题：] ，我在想什么或做错了什么？我附上以下图片以供参考

Answer 1

在您看来，第一件事是styles应该在style的位置。一个简单的问题，为什么要在样式表中设置一个const？也许尝试绕过const并使用：

  <View style={styles.headerContainer1}> 
        <Text> {this.News}</Text>
        <Text>{this.home}</Text>
        <Text> {this.Exchange}</Text>
        <Text> {this.about}</Text>
        </View>

或者也许只是将视图从styles更改为style

  <View style={headerContainer1}> 
        <Text> {this.News}</Text>
        <Text>{this.home}</Text>
        <Text> {this.Exchange}</Text>
        <Text> {this.about}</Text>
        </View>

我不确定您为什么会这样，但是我确定您有自己的理由：>

Answer 2

只需像这样使用样式表：

        <View style={styles.headerContainer1}> 
          <Text> {this.News}</Text>
          <Text>{this.home}</Text>
          <Text> {this.Exchange}</Text>
          <Text> {this.about}</Text>
        </View>

您只需要引用样式表，就不需要第二个样式表。

Answer 3

您需要在所需组件中添加style = {styles.name}

样式未在React Native中应用

3 个答案: