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>
);
}
如下图:

3.关于组件的属性
不要尝试在style中写入组件没有的属性
(1)第一种写法,并不会有红屏报错提示,只会有warning
render() {
return (
<View style={{border:5,height:60,borderColor:'blue'}}>
</View>
);
}

(2)第二种写法,写入样式创建中,会有红屏报错,可以在Valid style props中看到组件支持的属性
render() {
return (
<View style={styles.test}>
</View>
);
}
}
var styles = StyleSheet.create({
test: {
border: 5,
height: 60,
borderColor: 'blue'
}
}
);

网友评论