样式未在 React Native 中应用

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 并使用：

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

我不确定你为什么会这样做，但我相信你有你的理由：>