UIActivityIndicator的创建(React Native)

UIActivityIndicator的创建(React Native)

by 伍雪颖

'use strict';
var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  View,
  ActivityIndicatorIOS,
} = React;

class UIActivityIndicator extends React.Component {
  render() {
    return (
      <View style={styles.bgview}>
          <ActivityIndicatorIOS
          animating={true}
          style={styles.spinner}
        />
        </View>
      );
  }
}

class SampleApp extends React.Component {
  render() {
    return (
      <React.NavigatorIOS
        style={styles.container}
        initialRoute={{
          title: 'My App',
          component: UIActivityIndicator,
        }}/>
    );
  }
}

var styles = React.StyleSheet.create({
  container: {
    flex: 1
  },
  bgview: {
    backgroundColor: '#eeeeee',
    paddingTop: 75,
    paddingLeft: 10,
    paddingRight: 10,
    paddingBottom: 10,
  },
  spinner: {width: 30,},
});

React.AppRegistry.registerComponent('SampleApp', function() { return SampleApp });
时间: 2024-10-10 10:27:13

UIActivityIndicator的创建(React Native)的相关文章

UILabel创建(React Native)

UILabel创建(React Native) by 伍雪颖 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, View, Text, } = React; class UILabel extends React.Component { render() { return ( <View style={styles.bgview}> <Text style = {styles

UITableView表格的创建(React Native)

UITableView表格的创建(React Native) by 伍雪颖 'use strict'; var React = require('react-native'); var { Image, ListView, StyleSheet, Text, View, } = React; var SampleApp = React.createClass({ getInitialState: function() { var ds = new ListView.DataSource({row

UIImageView的创建(React Native)

UIImageView的创建(React Native) by 伍雪颖 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, View, Image, } = React; class UIImageView extends React.Component { render() { return ( <View style={styles.bgview}> <Image sour

UITableViewCell组合创建(React Native)

UITableViewCell组合创建(React Native) by 伍雪颖 'use strict'; var React = require('react-native'); var { AppRegistry, StyleSheet, View, Image, Text, } = React; class UIImageView extends React.Component { render() { return ( <View style={styles.bgview}> <

React Native Android原生模块开发实战|教程|心得|如何创建React Native Android原生模块

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 前言 一直想写一下我在React Native原生模块封装方面的一些经验和心得,来分享给大家,但实在抽不开身,今天看了一下日历发现马上就春节了,所以就赶在春节之前将这篇博文写好并发布(其实是两篇:要看iOS篇的点这里<React Native iOS原生模块开发>). 我平时在用React Native开发App时会

React Native iOS原生模块开发实战|教程|心得|如何创建React Native iOS原生模块

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691432) 前言 一直想写一下我在React Native原生模块封装方面的一些经验和心得,来分享给大家,但实在抽不开身,今天看了一下日历发现马上就春节了,所以就赶在春节之前将这篇博文写好并发布(其实是两篇:要看Android篇的点这里<React Native Android原生模块开发>). 我平时在用React Nativ

React Native Android原生模块开发实战|教程|心得|怎样创建React Native Android原生模块

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://blog.csdn.net/fengyuzhengfan/article/details/54691503) 告诉大家一个好消息.为大家精心准备的React Native视频教程公布了,大家现能够看视频学React Native了. 前言 一直想写一下我在React Native原生模块封装方面的一些经验和心得.来分享给大家,但实在抽不开身.今天看了一下日历发现立即就春节了.所以就赶在春节之前将这篇博文写好并公布(事实上是两篇

React Native创建一个APP

React Native 结合了 Web 应用和 Native 应用的优势,可以使用 JavaScript 来开发 iOS 和 Android 原生应用.在 JavaScript 中用 React 抽象操作系统原生的 UI 组件,代替 DOM 元素来渲染等. React Native代码框架示例下载:https://github.com/facebook/react-native 1.首先下载安装nodejs:https://nodejs.org/en/ 2.然后推荐使用Homebrew 的方式

React Native 技术 开发跨平台 Native App 初探

转载请注明出处:http://blog.csdn.net/smartbetter/article/details/64190798 我们已经了解像 Titanium 和 PhoneGap 等框架,它们能让开发者用 Web 技术构建移动应用.这是一个优势,支持开发者使用原先网络和移动开发的相关技术.仅如此,相同的代码库经过小幅度的修改便能适用多个平台--这就是著名的一次编写,到处运行.然而,当涉及到构建应用的性能时,这些框架的缺点显露无遗,尽管它们有一些吸引力,但却一直更适用于构建原生应用.Rea