一、hello world

  1. //要使用标签,第一步必须导入
  2. import React, { Component } from 'react';
  3. import { Text, View,Button} from 'react-native';
  5. export default class App extends Component {
  6.   render() {
  7.     return (
  8.         <View>
  9.           <Text>Hello, world!</Text>
  10.           <Button 
  11.           color="#ff2d51"
  12.           title="btn"/>
  13.         </View>
  14.     );
  15.   }
  16. }

二、Image

  1. //网络图片
  2. <Image source={{uri:"xxx"}}>
  3. //Tips:图片相关的资源一定要夹样式width,height
  1. //本地图片
  2. <Image source={require('./assets/bg.jpg')}/>

三、样式

  • View样式 ```javascript import React, { Component } from ‘react’; import { Text, View,StyleSheet} from ‘react-native’;

export default class App extends Component { render() { return ( //给多个style hello );

} } const styles = StyleSheet.create({ container:{ backgroundColor:”red”, width:200, height:200 }, txt:{ color:”blue” }, bg:{ backgroundColor:”#fff” } })

  1. <a name="eTJc5"></a>
  2. ### 四、Dimensions
  3. ```javascript
  4. import { Dimensions } from 'react-native';
  5. const { width, height,scale} =Dimensions.get('window');

五、布局

Tip: react-native中默认view就是flex布局

  1. export default class App extends Component {
  2.   render() {
  3.     return (
  4.       <View style={styles.container}>
  5.          <View style={styles.child}></View>
  6.          <View style={styles.child}></View>
  7.          <View style={styles.child}></View>
  8.       </View>
  9.     );
  11.   }
  12. }
  13. const styles = StyleSheet.create({
  14.   container: {
  15.     width:400,
  16.     height:400,
  17.     backgroundColor:"red",
  18.     flexDirection:"row",
  19.     justifyContent:"space-around",
  20.     alignItems:"center"
  21.   },
  22.   child:{
  23.     width:100,
  24.     height:100,
  25.     backgroundColor:"blue"
  26.   }
  27. })

六、transform

  1.  transform:[{translate:[-50,-50]}]
  2. // transform:[{translateX:-50},{translateY:-50}]

七、border属性

  1. borderColor：边框颜色
  2. borderWidth：边框宽度
  3. borderRadius：边框圆角半径
  4. borderStyle：边框样式'solid'实线,'dotted'点,'dashed'虚线

八、自定义按钮

const styles = StyleSheet.create({ btn: { width:50, height:30, backgroundColor:”#333”, borderColor:”#fff”, borderWidth:1, borderRadius:20, borderStyle:”solid”, justifyContent: ‘center’, alignItems: ‘center’, }, text:{ color:”#fff” } }) ```