React-Native 学习(一)

最新推荐文章于 2025-05-12 01:52:27 发布

原创最新推荐文章于 2025-05-12 01:52:27 发布 · 343 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#React #Native #View

React-Native 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个React Native应用的布局实现案例，通过不同的样式属性设置，展示了如何在React Native中实现自由摆放、居中摆放、居左显示及居右显示等布局效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

深入了解运行机制:http://www.infoq.com/cn/articles/react-native-solution-dev-environment

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
} from 'react-native';

export default class Helloworld extends Component {
  render() {
    return (

     <View style={styles.style_0}>
          <View style={styles.view}><Text>自由摆放</Text></View>
          <View style={[styles.view, styles.center]}><Text>居中摆放</Text></View>
          <View style={[styles.view, styles.left]}><Text>居左显示</Text></View>
          <View style={[styles.view, styles.right]}><Text>居右显示</Text></View>
          <View style={[styles.centerView]}><Text>方块居中</Text></View>
     </View>

    );
  }
}

const styles = StyleSheet.create({
  style_0:{
    flex:1,
    borderWidth:0.5,
    borderColor:'red',
    // justifyContent:'center',
    // alignItems:'center'
  },
  view: {
    borderWidth:5,
    borderColor:'blue',
    width:100,
    height:40
  },
  center: {
    alignSelf:'center'
  },
  left: {
    alignSelf:'flex-start'
  },
  right: {
    alignSelf:'flex-end'
  },
  centerView: {
    borderWidth:5,
    borderColor:'green',
    flex:1,
    width:200,
  },
});

AppRegistry.registerComponent('Helloworld', () => Helloworld);