React Native 开发之 (08) FlexBox例子

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Native 开发之 (08) FlexBox例子相关的知识,希望对你有一定的参考价值。

1 example1

RectNative View demo 参考 http://reactnative.cn/docs/0.31/view.html#content

index.ios.js

import React, { Component } from react;
import {
  AppRegistry,//注册
  StyleSheet,//样式
  Text,     //文本组件
  View,      //视图组件
} from react-native;

class ADemo extends Component {
  //初始化方法-->返回具体的组件内容
  render() {
    return(
      <View style={styles.container}>
      <Text>你好 !!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: center,
    alignItems: center,
    backgroundColor: red,
  },
  welcome: {
    fontSize: 20,
    textAlign: center,
    margin: 10,
  }
});

AppRegistry.registerComponent(ADemo, () => ADemo);

 

 

 

参考资料 http://reactnative.cn/

 

以上是关于React Native 开发之 (08) FlexBox例子的主要内容,如果未能解决你的问题,请参考以下文章

React Native入门 认识Flexbox布局

React Native开发React Native控件之ProgressBarAndroid进度条讲解(12)

安卓转战React-Native之签名打包成Apk并极速多渠道打包

React Native开发React Native控件之DrawerLayoutAndroid抽屉导航切换组件讲解(13)

React Native开发React Native控件之WebView组件详解以及实例使用(22)

React Native 开发之 (02) 用Sublime 3作为React Native的开发IDE