react native样式
    一、React Native样式
    1、Style对象
    React Native中样式是通过ate()方法来定义，它可以将多种样式封装到一个对象中，以被统一调用。组件中的样式属性都是ate()定义的样式，使用的时候，样式名只需要引用定义的样式即可，React Native中每一个样式都可以以JavaScript对象字面量的形式定义：
    //定义样式
    const styles = ate({
    container: {
    flex: 1,
    },
    title: {
    fontSize: 16
    },
    content: {
    fontSize: 12
    }
    })
    //使用样式
    <View style={ainer}>
    <Text style={styles.title}>标题</Text>
    <Text style={t}>内容</Text>
    </View>
    2、定义样式
    React Native中可以使用以下样式：
    （1）flexbox布局
    React Native不是使用百分比写法，而是使用flexbox布局，通过设置组件的flex属性，可以实现类似CSS中的flexbox布局，如：
    <View style={{flex:1}}>
    <View style={{flex:2}}>内容1</View>
    <View style={{flex:3}}>内容2</View>
    </View>
    上面代码中，View标签外层设置了flex:1，表示这个View组件占满父元素，子View设置
了flex:2和flex:3，表示子View组件的比例是2:3。
    （2）Flex Direction
    flexDirection属性用来决定主轴的方向（即子元素排列的方向），默认值为column：
    <View style={{flex:1, flexDirection:'row'}}>
    <View style={{flex:2}}>内容1</View>
    <View style={{flex:3}}>内容2</View>
    </View>
    上面代码设置flexDirection为row，表示子元素内容排成一行。
    （3）Justify Content
    justifyContent属性决定元素的排列方式，默认值为flex-start：
    <View style={{flex:1, flexDirection:'row', justifyContent:'space-between'}}>
flex布局对齐方式
    <View style={{flex:2}}>内容1</View>
    <View style={{flex:3}}>内容2</View>
    </View>
    上面代码设置justifyContent为space-between，表示两个子元素间距相等，两头与父元素两端对齐。
    （4）Align Items
    alignItems用于设置子元素在交叉轴上的对齐方式，默认值为stretch：
    <View style={{flex:1, flexDirection:'row', justifyContent:'space-between', alignItems:'center'}}>
    <View style={{flex:2}}>内容1</View>
    <View style={{flex:3}}>内容2</View>
    </View>
    上面代码设置alignItems为center，表示子元素在交叉轴的中心对齐。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。