react-native中Stylesheet有什么用

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

是的，您应该更喜欢样式表而不是内联样式。当您在样式表中设置样式时，您会直接在 Emulator/Device 上得到相应的错误，因此您会知道您的错误（如果有的话），而您的代码可能会在内联样式中搞砸！

Answer 2

您应该使用 StyleSheet 而不是内联样式。

好处

通过将样式从渲染函数中移开，您可以代码更容易理解。
给样式命名是给底层增加意义的好方法
渲染函数中的组件。
与普通样式不同，样式表仅通过桥发送一次 render() 中的对象。

但是您可以使用样式属性添加内联样式。但是，这不是最佳做法，因为很难理解 code.One 您可能不想使用内联样式表的原因是为了减少代码中的重复量。

第一个 一个是内联样式。

示例

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

第二个 一个是使用StyleSheet， 您创建一个样式对象并分别引用每个样式。这带来了样式与渲染方法的分离，并帮助您组织代码。

例子

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

什么时候应该使用内联样式 就像你有基本样式表并且你有各种具有相同样式但具有一个或两个属性的组件改变然后你可以使用内联样式

例子

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

});

react-native中Stylesheet有什么用

What is the use of Stylesheet in react-native

react-native

react-native-android