第一个react-native工程,简单点

推荐一个学习react-native的好网站,是将react-native在github上面的文章翻译过来的中文网站,挺适合一个入门react-native的人学习,http://reactnative.cn/,学的时候最好选择最新的学习,我选择的是0.39版本。
附上截图:
第一个react-native工程,简单点_第1张图片
也没啥好讲的,自己也是刚学没几天,就当做个笔记吧。修改的是index.android.js这个文件,修改之后安装到手机上就可以看见,写的乱糟糟的,瞎看看。

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

class Greeting extends React.Component {
  render() {
    return (
      
        Hello {this.props.name}!
      
    );
  }
}

class Blink extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showText: true };

    // 每1000毫秒对showText状态做一次取反操作
    setInterval(() => {
      this.setState({ showText: !this.state.showText });
    }, 500);
  }

  render() {
    // 根据当前showText的值决定是否显示text内容
    let display = this.state.showText ? this.props.text : "么得";
    return (
      {display}
    );
  }
}

class test extends React.Component {
  // 初始化模拟数据
  constructor(props) {
    super(props);
    var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
    this.state = {
      dataSource: ds.cloneWithRows(['John', 'Joel', 'James', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'caojunsheng', 'hahaha', 'demo', 'hello', 'Jimmy', 'Jackson', 'Jillian', 'Julie', 'caojunsheng', 'hahaha'])
    };
  }
  render() {
    let pic = {
      uri: 'http://pic37.nipic.com/20140104/9885883_151644517000_2.jpg'
    };
    return (
      
        
          First part and 
          second part
        

        
          First part and 
          second part
        
        
          I am bold
          
            {' and red'}
          
        
        
        
        
        
        
          
          
          
        
        
        
          {"一个listview列表啊"}
        
         {rowData}}
          style={styles.container}
        />
      
    );
  }
}
class LotsOfGreetings extends React.Component {
  render() {
    return (
      
        
        
        
      
    );
  }
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: '#F5FCFF',
  },
  textstyle:{
    marginLeft:20,
    fontSize: 30
  },
  textstyle1:{
    textAlignVertical: 'center',
    fontSize: 30,
    color: "#FF4500"
  },
});
AppRegistry.registerComponent('test', () => test);

你可能感兴趣的:(Android)