react native基本语法一

一、样式

react native的样式方式，与react类似
样式表现方式：
1、行内：用js对象表达html中css样式 ，花括号{ }内是对象
style={ {flex:1,justifyContent:"center"} }
(1)注意属性不再是 - 连接换成小驼峰命名：
justify-content 换成 justifyContent
(2)注意属性值是字符串的加引号 " "
2、调用自定义样式表:{样式类.属性}
3、样式表和内联样式共存:{[ ]}

export default class App extends Component {
  render() {
  var name="jack"
    return (
        // 行内样式
      <View style={ {backgroundColor:"skyblue",flex:1,alignItems:"center",justifyContent:"center"} }>
          {/* 下面引用了自定义样式styles，多组样式对象时可写在数组里，数组中越靠后，优先级越高，如下面的字体会显示为红色 */}
        <Text style={ [styles.font,{color:"red"}] }>hello {name}</Text>
      </View>
    );
  }
}
// 自定义样式
const styles=StyleSheet.create({
    font:{
        fontSize:50,
        color:'blue'
    }
})

二、布局

react native先天默认的是flex布局，所以我们不需要写display：flex
不过react native中的flex布局与css中的flex有一定的区别
1、flexDirection:决定主轴方向：CSS中默认的是row方向，这里默认的是column
2、不需要写diplay：flex
3、flex：1 flex只能写一个值

三、图片Image

// 定义并导出自定义组件
// RN中引入图片资源一般常用的两种方式：
// 本地资源引入：source={ require('1.png') }
// 网络资源引入：source={ {uri:'http://1.png'} } 要指定当前图片的尺寸（否侧图片不显示）
// 在使用ImageBackground要指定尺寸

       <View>
         {/* 本地资源引入 */}
          <Image source={ require('../images/de.jpg') }></Image> 
          {/* 网络资源 */}
           <Image 
          opacity={0.2}
          style={{width:200,height:200}}
          source={ {uri:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1572251817&di=122528a67a3c249070a67faf691ecd40&imgtype=jpg&er=1&src=http%3A%2F%2Fpic.baike.soso.com%2Fp%2F20131220%2F20131220235848-670354324.jpg'} }></Image> 
          {/*背景图片 */}
          <ImageBackground
            source={ require('../images/de.jpg') }
            style={{width:'100%',height:1000}}
            opacity={0.5}
          >

            <Text style={{fontSize:50,color:'white'}}>刘德华</Text>
          </ImageBackground>
       </View>