React Native 学习记录（二）React Native 布局

React-Native就提供了一套iOS原生的组件，这样就不用HTML5去模拟组件了。React-Native使用css来构建页面布局，使用Native iOS Components给我们提供强大的组件功能

1.基础代码

import React, {Component} from 'react';
import {    
NavigatorIOS,    
ListView,   
TextInput,    
WebView,    
TouchableOpacity,    
AppRegistry,    
StyleSheet,    
Image,   
Text,    
View
} from 'react-native';

class AwesomeProject extends Component {
 
render() {        
return (            
     <View>          
     </View>       
  );    
}
}
var styles =StyleSheet.create({
});
AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

2.尝试改变view的样式

render() {    
   return (        
      <View style={{borderWidth:5,height:60,borderColor:'blue'}}>  
         </View>   
 );
}

如下图：

Paste_Image.png

3.关于组件的属性

不要尝试在style中写入组件没有的属性
（1）第一种写法，并不会有红屏报错提示，只会有warning

render() {    
   return (        
      <View style={{border:5,height:60,borderColor:'blue'}}>    
       </View>   
 );
}

Paste_Image.png

（2）第二种写法，写入样式创建中，会有红屏报错,可以在Valid style props中看到组件支持的属性

 render() {       
   return (           
     <View style={styles.test}>          
    </View>        
    );    
  }
}

var styles = StyleSheet.create({   
 test: {        
        border: 5,       
        height: 60,        
        borderColor: 'blue'   
        }
    }
);

Paste_Image.png