Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/variables/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
React native react native中样式表的用途是什么_React Native_React Native Android - Fatal编程技术网

React native react native中样式表的用途是什么

React native react native中样式表的用途是什么,react-native,react-native-android,React Native,React Native Android,我正在使用react native构建一个android应用程序 我的JSX的一部分包括 <Text style={{ color: "red" }}> Styled using style prop !! </Text> <Text style={styles.colorRed}> Styled uisng StyleSheet !!</Text> 文本组件至少在android平台上呈现相同的样式 建议使用样式表模块。我的问题是,什么时候应该使

我正在使用react native构建一个android应用程序

我的JSX的一部分包括

<Text style={{ color: "red" }}> Styled using style prop !! </Text>
<Text style={styles.colorRed}> Styled uisng StyleSheet !!</Text>
文本组件至少在android平台上呈现相同的样式


建议使用样式表模块。我的问题是,什么时候应该使用样式表模块?

是的,您应该更喜欢样式表而不是内联样式。
当您在样式表中进行样式设置时,您会直接在模拟器/设备上得到相应的错误,这样您就可以知道您的错误,而您的代码可能会在内联样式设置中出错

是的,您应该更喜欢样式表而不是内联样式。
当您在样式表中进行样式设置时,您会直接在模拟器/设备上得到相应的错误,这样您就可以知道您的错误,而您的代码可能会在内联样式设置中出错

应该使用样式表而不是内联样式

本菲茨

通过将样式从渲染函数移开,可以使 代码更容易理解

命名样式是一个很好的方法,可以为低级别添加含义 渲染函数中的组件

与普通样式不同,样式表只在桥上发送一次 对象内部渲染

但是,您可以使用“样式”属性以内联方式添加样式。但是,这不是最佳做法,因为代码可能很难读取。您不希望使用内嵌样式表的一个原因是减少代码中的重复量

第一个是内联样式

范例

第二种方法是使用样式表,创建一个样式对象并分别引用每个样式。这将使样式与渲染方法分离,并帮助您组织代码

范例

什么时候应该使用内联样式,例如,如果您有基本样式表,并且您有具有相同样式但有一个或两个属性更改的各种组件,那么您可以使用内联样式

范例


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

本菲茨

通过将样式从渲染函数移开,可以使 代码更容易理解

命名样式是一个很好的方法,可以为低级别添加含义 渲染函数中的组件

与普通样式不同,样式表只在桥上发送一次 对象内部渲染

但是,您可以使用“样式”属性以内联方式添加样式。但是,这不是最佳做法,因为代码可能很难读取。您不希望使用内嵌样式表的一个原因是减少代码中的重复量

第一个是内联样式

范例

第二种方法是使用样式表,创建一个样式对象并分别引用每个样式。这将使样式与渲染方法分离,并帮助您组织代码

范例

什么时候应该使用内联样式,例如,如果您有基本样式表,并且您有具有相同样式但有一个或两个属性更改的各种组件,那么您可以使用内联样式

范例


我在这里回答了一个类似的问题可能的副本我在这里回答了一个类似的问题可能的副本
const styles = StyleSheet.create({
  colorRed: {
    color: "red"
  }
})
<Text style={{ color: "red" }}> Styled using style prop !! </Text>
    <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
    },

});