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>

这里我的头部容器看起来/来自这里。

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

  const { 
    headerContainer1
  } = styles;

在这里，我做了两件事。 flexDirection: "row" 和 backgroundColor: "red" 但不幸的是，我看不到任何应用的更改。

[问题:] 我错过或做错了什么？ 我附上下面的图片供参考

- iRohitBhatia

---

在样式文件中尝试使用 export default styles，并在视图中使用 import styles from 'style file path'，然后在 <View style={styles.headerContainer1}>... 中使用。此外，视图的属性应该是单数形式，因此应该使用 style= 而不是 styles=。 - davidhu

Answer 1

在您查看的第一件事中，应该将 styles 更改为 style。一个快速问题，为什么要将一个常量设置为样式表？也许尝试绕过常量并使用：

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

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

- Michael Artman

---

那个引起问题的是它。谢谢 :) - Alwaysblue

我有一些样式，而不是一个样式。简单的答案解决了我的问题。 - Mote Zart

Answer 2

只需像这样使用您的样式表：

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

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

- JRK

---

非常感谢您的答案，但那也不起作用。 另外，出于某种原因，我发现第二种方法有点干净（这只是个人偏好）。 - Alwaysblue

你能发布完整的组件吗？ - JRK

非常感谢JRK。我在样式中添加了一个愚蠢的s，导致了问题。 - Alwaysblue

Answer 3

你需要在你想要的组件中添加style={styles.name}。

- Shahrukh Sanjrani