React Native学习笔记(四)布局
<Text style = {{color: '#ff0000',fontSize: 15}}> 学习布局 </Text>
这里通过style属性,定义了Text文本的字体颜色和字体大小。这里第一个大括号是:JSX语法,第二个大括号是:javaScript对象,我们把需要定义的样式都以对象的方式写在这个大括号里。 <Text style = {styles.textContent}> 测试 </Text>
// ...
const styles = StyleSheet.create({
textContent: {
color: '#ff0000',fontSize: 1,},});
这里我们使用React.StyleSheet创建了一个 JS对象,那么在组件上引用是这样的:style={{对象名称.对象属性}}。 const styles = StyleSheet.create({ textContent: { color: '#ff0000',test: 2,});
<View style = {styles.container}>
<View style = {styles.subContainer} >
<View style = {styles.item1}>
<Text style = {styles.textContent}> item1 </Text>
</View>
<View style = {styles.item2}>
<Text style = {styles.textContent}> item2 </Text>
</View>
<View style = {styles.item3}>
<Text style = {styles.textContent}> item3 </Text>
</View>
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,subContainer: {
flex: 1,flexDirection: 'row',item1: {
flex: 1,height: 40,backgroundColor: '#ff0000',item2: {
flex: 1,backgroundColor: '#00ff00',item3: {
flex: 1,backgroundColor: '#0000ff',textContent: {
color: '#ffffff',fontSize: 20,
如下图: 2)flexDirection属性 <View style = {styles.container}>
<View style = {styles.item1}>
<Text style = {styles.textContent}> item1 </Text>
</View>
<View style = {styles.item2}>
<Text style = {styles.textContent}> item2 </Text>
</View>
<View style = {styles.item3}>
<Text style = {styles.textContent}> item3 </Text>
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1,justifyContent: 'flex-start',item1: {
width: 40,item2: {
width: 40,item3: {
width: 40,fontSize: 15,});
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |