reactjs - 样式未在 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

在你的 View 中，首先你有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>

或者也许只是修复 View 以将 styles 更改为 style

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

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