Question

我正在使用react-native构建一个Android应用程序。

我的JSX的一部分包括

<Text style={{ color: "red" }}> Styled using style prop !! </Text>
<Text style={styles.colorRed}> Styled uisng StyleSheet !!</Text>

和

const styles = StyleSheet.create({
  colorRed: {
    color: "red"
  }
})

Text组件似乎呈现相同的样式（至少在android平台上），

docs建议使用StyleSheet模块。 我的问题是，何时应使用StyleSheet模块？

Answer 1

您应该在内联样式上使用StyleSheet。

好处

通过将样式从渲染功能中移开，您可以代码更容易理解。
命名样式是在低层添加含义的好方法
渲染功能中的组件。
与普通样式不同，样式表仅在网桥上发送一次 render（）中的对象。

但是，您可以使用style属性来内联添加样式。但是，这不是最佳实践，因为它可能很难阅读代码。您可能不希望使用内联样式表的原因之一是为了减少代码中的重复次数。

第一个是内联样式。

示例

<Text style={{ color: "red" }}> Styled using style prop !! </Text>

第二种方法是使用 StyleSheet ，您可以创建一个样式对象并分别引用每个样式。这使样式与render方法分离，并帮助您组织代码。

示例

    <Text style={styles.colorRed}> Styled uisng StyleSheet !!</Text>
    // initialize stylesheet
    const styles = StyleSheet.create({
      colorRed: {
        color: "red"
      }
})

何时应使用内嵌样式 ，例如，如果您具有基本样式表，并且具有相同样式但具有一个或两个属性更改的各种组件，则可以使用内嵌样式< / p>

示例

    <Text style={[CommonStyles.textLightGrey, { alignSelf: 'flex-end' }]} >Balance</Text>
    <Text style={[CommonStyles.textLightGrey, { alignSelf: 'center' }]} >Balance</Text>
// It is my common or base stylesheet
export default StyleSheet.create({
       textLightGrey: {
        fontSize: 12,
        color: COLORS.lightgrey
    },

});

Answer 2

是的，您应该更喜欢样式表而不是内联样式。当您在样式表中设置样式时，您会直接在模拟器/设备上收到相应的错误，因此您将知道错误（如果有），而代码可能会以内联样式混乱！

样式表在react-native中有什么用

2 个答案: