一、样式
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>