ReactNative简单例子

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */


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

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          我的学习之旅
        </Text>
      </View>    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

　自定义组件

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */


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


export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        <HeaderText>
        我是自定义组件
        </HeaderText>
      </View>
    );
  }
}

class  HeaderText extends React.Component {
   render(){
     return (
        <Text style ={styles.welcome}>
          {this.props.children}
          </Text>
        );
   }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'green',
    margin:50,
    borderRadius:14,
    shadowColor:'red',
    shadowOpacity:0.6,
    shadowRadius:20,
    shadowOffset:{
      height:1,
      width:0
    }
  },
  welcome: {
    fontSize: 16,
    textAlign: 'center',
    letterSpacing:2,
    lineHeight:20,
    margin: 10,
    textDecorationLine:'underline'
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

　　

列表视图

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */


import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  ListView,
} from 'react-native';


export default class App extends Component<{}> {
  constructor(props){
    super(props);
    let movies = [
      {title:'行1'},
      {title:'行2'},
      {title:'行3'},
      {title:'行4'},
      {title:'行5'},
      {title:'行6'},
    ];
    let dataSource =  new ListView.DataSource({
        rowHasChanged: (row1,row2) => row1 !== row2
    });
    this.state = {
      movies: dataSource.cloneWithRows(movies)
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <ListView
          dataSource={this.state.movies}
          renderRow={
            movie => <Text style= {styles.welcome}>{movie.title}</Text>
          }
        />
      </View>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'green',
    margin:50,
    borderRadius:14,
    shadowColor:'red',
    shadowOpacity:0.6,
    shadowRadius:20,
    shadowOffset:{
      height:1,
      width:0
    }
  },
  welcome: {
    fontSize: 16,
    textAlign: 'center',
    letterSpacing:2,
    lineHeight:20,
    margin: 10,
    textDecorationLine:'underline'
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

　　

加载网络数据

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */


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

var REQUEST_URL = 'https://facebook.github.io/react-native/movies.json';
export default class App extends Component<{}> {
    constructor(props) {
      super(props);
      this.state = {
        movies:null,
      }
    }
    componentDidMount(){
      this.fetchData();
    }
    fetchData(){
      fetch(REQUEST_URL)
      .then((response)=>response.json())
      .then((responseData)=> {
        this.setState({
          movies:responseData.movies,
        });
      })
      .done();
    }
    render() {
      if (!this.state.movies) {
          return this.renderLoadingView();
      }
      var movie = this.state.movies[0];
      return this.renderMovie(movie);
    }
    renderLoadingView(){
      return(
        <View style={styles.container}>
            <Text>
              正在加载电影数据...
            </Text>
        </View>
      );
    }
    renderMovie(movie) {
        return (
          <View style={styles.container}>
            <View style={styles.rightContainer}>
              <Text style={styles.title}>{movie.title}</Text>
              <Text style={styles.year}>{movie.releaseYear}</Text>
            </View>
          </View>
        );
    }
}
const styles = StyleSheet.create({
  container:{
      flex:1,
      flexDirection:'row',
      justifyContent:'center',
      alignItems:'center',
      backgroundColor:'#f5fcff'
  },
  title:{
    fontSize:20,
    marginBottom:8,
    textAlign:'center'
  },
  year: {
    textAlign:'center'
  },
  rightContainer:{
    flex:1,
  },
  thumbnail: {
    width:53,
    height:81

  }
});

 

进阶版本

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
'use strict'
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    Image,
    View,
    ListView,
} from 'react-native';


let REQUEST_URL = 'https://api.douban.com/v2/movie/top250';
export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource:new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}),
            loaded: false,
        };
    }
  componentDidMount(){
        this._fetchData();
  }
    _fetchData(){
      fetch(REQUEST_URL)
          .then(response => response.json())
              .then(responseData =>{
                  this.setState({
                      movies:this.state.dataSource.cloneWithRows(responseData.subjects),
                      loaded: true,
                  });
              })
          .done();
    }
    render() {
        if(!this.state.loaded){
            return this._renderLoadingView();
        }
        return (
            <View style={styles.Container}>
                <ListView
                    dataSource={this.state.movies}
                    renderRow={this._renderMovieList}
                    style={styles.listView}

                />
            </View>
        );
    }
    _renderMovieList(movie){
        return(
            <View style = {styles.item}>
                <View style = {styles.itemImage}>
                    <Image
                        style ={styles.image}
                        source ={{uri:movie.images.large}}/>
                </View>
                <View style = {styles.itemContent}>
                    <Text style ={styles.itemHeader}>{movie.title}</Text>
                    <Text style ={styles.itemMeta}>{movie.original_title}({movie.year})</Text>
                    <Text style ={styles.redText}>{movie.rating.average}</Text>

                </View>
            </View>
        );
    };
    _renderLoadingView(){
        return (
            <View style ={styles.loading}>
                <Text > loading movies.....</Text>
            </View>
        );
    };

}


const styles = StyleSheet.create({
    item:{
        flexDirection:'row',
        borderBottomWidth:1,
        borderColor:'rgba(100,53,201,0.1)',
        paddingBottom:6,
        marginBottom:6,
        flex:1,
    },
    itemContent:{
        flex:1,
        marginLeft:13,
        marginTop:6,
    },
    itemHeader:{
        fontSize:18,
        fontFamily:'Helvetica Neue',
        fontWeight:'300',
        color:'#6435c9',
        marginBottom:6,
    },
    itemMeta:{
        fontSize:16,
        color:'rgba(0,0,0,0.6)',
        marginBottom:6,
    },
    redText:{
        color:'#db2828',
    },
    listView:{
        paddingTop: 20,
        backgroundColor: '#F5FCFF',
    },
    loading:{
        flex:1,
        justifyContent:'center',
        alignItems:'center',
    },
    overlay: {
        backgroundColor: 'rgba(0,0,0,0.3)',
        alignItems: 'center'
    },
    overlayHeader: {
        fontSize: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#eae7ff',
        padding: 10
    },
    overlaySubHeader: {
        fontSize: 16,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#eae7ff',
        padding: 10,
        paddingTop: 0,
    },
    backImage: {
        flex: 1,
        resizeMode: 'cover',
    },
    image: {

        height: 150,
        width: 100,
        justifyContent: 'center',
    },
    itemText: {
        fontSize: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '200',
        color: '#6435c9',
        padding: 30,
    },
    Container: {
        flexDirection: 'column',
        backgroundColor: '#eae7ff',
        flex: 1,
    },
    Text: {
        color: '#6435c9',
        fontSize: 26,
        textAlign: 'center',
        fontStyle: 'italic',
        letterSpacing: 2,
        lineHeight: 33,
        fontFamily: 'Helvetica Neue',
        fontWeight: '300',
        textDecorationLine: 'underline',
        textDecorationStyle: 'dashed',
    },

});