React Native实例

本文主要包括以下内容

1. View组件的实例
2. Text组件实例
3. Navigator组件实例
4. TextInput组件实例

View组件的实例

效果如下

代码如下

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

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

class Abc extends Component {
  render() {
    return (
     <View style={styles.flex}>
      <View style={styles.container}>
        <View style={[styles.item,styles.center]}>

          <Text style={styles.font}>酒店</Text>

        </View>

        <View style={[styles.item,styles.lineLeftRight]}>

          <View style={[styles.center,styles.flex,styles.lineCenter]}>
            <Text style={styles.font}>海外酒店</Text>
          </View>

          <View style={[styles.center,styles.flex]}>
            <Text style={styles.font}>特惠酒店</Text>

          </View>

        </View>

        <View style={styles.item}>

          <View style={[styles.center,styles.flex,styles.lineCenter]}>
            <Text style={styles.font}>团购</Text>
          </View>

          <View style={[styles.center,styles.flex]}>
            <Text style={styles.font}>客栈，公寓</Text>

          </View>

        </View>
      </View>

        </View>
    );
  }
}

const styles = StyleSheet.create({
 container: {
    marginTop:200,
    marginLeft:5,
    marginRight:5,
    height:84,
    flexDirection:'row',
    borderRadius:5,
    padding:2,
    backgroundColor:'#FF0067',
  },
  item: {
    flex: 1,
    height:80,

  },
  center:{
    justifyContent:'center',
    alignItems:'center',
  },
  flex:{
    flex:1,
  },
  font:{
    color:'#fff',
    fontSize:16,
    fontWeight:'bold',
  },
  lineLeftRight:{
    borderLeftWidth:1/PixelRatio.get(),
    borderRightWidth:1/PixelRatio.get(),
    borderColor:'#fff',
  },
  lineCenter:{
    borderBottomWidth:1/PixelRatio.get(),
    borderColor:'#fff',
  },
});

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

Text组件实例

head.js

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

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

class Header extends Component {
  render() {
    return (
       <View style={styles.flex}>
                <Text style={styles.font}>

                    <Text style={styles.font_1}>网易</Text>
                    <Text style={styles.font_2}>新闻</Text>
                    <Text>有态度"</Text>
                </Text>

        </View>
    );
  }
}

const styles = StyleSheet.create({
  flex:{
        marginTop:25,
        height:50,
        borderBottomWidth:3/PixelRatio.get(),
        borderBottomColor:'#EF2D36',
        alignItems:'center',
    },
    font:{
        fontSize:25,
        fontWeight:'bold',
        textAlign:'center',
    },
    font_1:{
        color:'#CD1D1C',
    },
    font_2:{
        color:'#FFF',
        backgroundColor:'#CD1D1C',
    },
});

module.exports=Header;

将head.js导入到主JS中的代码为const Header=require(‘./head’);

主JS详细代码

实现了列表，并且有点击效果

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

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

const Header=require('./head');

class Abc extends Component {
  render() {
    return (
     <View style={styles.flex}>
            <Header></Header>
            <List title='一线城市楼市退烧 有房源一夜跌价160万'></List>
            <List title='上海市民称墓地太贵买不起 买房存骨灰'></List>
            <List title='朝鲜再发视频:摧毁青瓦台 一切化作灰烬'></List>
            <List title='生活大爆炸人物原型都好牛逼'></List>

             <ImportantNews
                news={[
                '解放军报报社大楼正在拆除 标识已被卸下(图)',
                '韩国停签东三省52家旅行社 或为阻止朝旅游创汇',
                '南京大学生发起亲吻陌生人活动 有女生献初吻-南京大学生发起亲吻陌生人活动 有女生献初吻-南京大学生发起亲吻陌生人活动 有女生献初吻',
                '防总部署长江防汛:以防御98年量级大洪水为目标'
                ]}>
            </ImportantNews>
      </View>

    );
  }
}

class List extends Component{
    render(){
        return (
            <View style={styles.list_item}>
               <Text style={styles.list_item_font}>{this.props.title}</Text>
            </View>
        );
    }
}

class ImportantNews extends Component{

    show(title){

        alert(title);

    }

    render(){
        var news=[];
        for(var i in this.props.news){
            var text=(
                <Text
                    onPress={this.show.bind(this,this.props.news[i])}
                    numberOfLines={2}
                    style={styles.news_item}
                    key={i}

                    >{this.props.news[i]}</Text>
            );
            news.push(text);
        }
        return (
            <View style={styles.flex}>
                <Text style={styles.news_title}>今日要闻</Text>
                {news}

            </View>

        );
    }
}

const styles = StyleSheet.create({
  flex:{
    flex:1,
  },

    list_item:{
        height:40,
        marginLeft:10,
        marginRight:10,
        borderBottomWidth:1,
        borderBottomColor:'#ddd',
        justifyContent:'center',
    },

    list_item_font:{
        fontSize:16,
    },

    news_item:{
        marginLeft:10,
        marginRight:10,
        fontSize:15,
        lineHeight:40,
    },

    news_title:{
        fontSize:20,
        fontWeight:'bold',
        color:'#CD1D1C',
        marginLeft:10,
        marginTop:15,

    },
});

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

效果如下

Navigator组件实例

实现了页面跳转和通过Navigator传递数据并回传数据，在componentDidMount中获取传递过来的数据

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

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

const Header=require('./head');

class Abc extends Component {
  render() {
     let defaultName='List';
      let defaultComponent=List;
    return (
        <Navigator
            initialRoute={{ name: defaultName, component: defaultComponent }}
            //配置场景
            configureScene=
                {
            (route) => {

//这个是页面之间跳转时候的动画，具体有哪些？可以看这个目录下，有源代码的: node_modules/react-//native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js

            return Navigator.SceneConfigs.VerticalDownSwipeJump;
          }
          }
            renderScene={
            (route, navigator) =>
             {
            let Component = route.component;
            return <Component {...route.params} navigator={navigator} />
          }
          } />

    );  }
}

class List extends Component {

    constructor(props) {
        super(props);
        this.state = {
             id:1,
            user:null,
        };
    }

    _pressButton() {
        const { navigator } = this.props;
        //为什么这里可以取得 props.navigator?请看上文:
        //<Component {...route.params} navigator={navigator} />
        //这里传递了navigator作为props
        const self=this;
         if(navigator) {
            navigator.push({
                name: 'Detail',
                component: Detail,
                params:{
                    id:this.state.id,
                    //从详情页获取user
                    getUser: function(user) {
                        self.setState({
                            user: user
                        })
                    }
                }
            })
        }
    }

    render(){
         if(this.state.user){
            return(
                <View>
                    <Text style={styles.list_item}>用户信息: { JSON.stringify(this.state.user) }</Text>
                </View>
            );
        }else{
        return (
            <ScrollView style={styles.flex}>
               <Text style={styles.list_item} onPress={this._pressButton.bind(this)} >☆ 豪华邮轮济州岛3日游</Text>
                <Text style={styles.list_item} onPress={this._pressButton.bind(this)}>☆ 豪华邮轮台湾3日游</Text>
                <Text style={styles.list_item} onPress={this._pressButton.bind(this)}>☆ 豪华邮轮地中海8日游</Text>
            </ScrollView>
        );
    }
    }

}

const USER_MODELS = {
    1: { name: 'mot', age: 23 },
    2: { name: '晴明大大', age: 25 }
};

class Detail extends Component{

    constructor(props) {
        super(props);
        this.state = {
             id:null

        };
    }

      componentDidMount() {
        //这里获取从FirstPageComponent传递过来的参数: id
        this.setState({
            id: this.props.id
        });
    }

    _pressButton() {
        const { navigator } = this.props;
        if(this.props.getUser) {
            let user = USER_MODELS[this.props.id];
            this.props.getUser(user);
        }
        if(navigator) {
            //很熟悉吧，入栈出栈~ 把当前的页面pop掉，这里就返回到了上一个页面:List了
            navigator.pop();
        }
    }

    render(){
        return(

            <ScrollView>
             <Text style={styles.list_item} >传递过来的用户id是：{this.state.id}</Text>
              <Text style={styles.list_item} onPress={this._pressButton.bind(this)} >点击我可以跳回去</Text>

            </ScrollView>

        );
    }
}

const styles = StyleSheet.create({
  flex:{
    flex:1,

  },
    list_item:{
        height:40,
        marginLeft:10,
        marginRight:10,
        fontSize:20,
        borderBottomWidth:1,
        borderBottomColor:'#ddd',
        justifyContent:'center',
    },
});

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

效果如下

TextInput组件实例

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

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
   Navigator,
   ScrollView,
   TextInput,
  Text,
    PixelRatio,
  View
} from 'react-native';

class Abc extends Component {
  render() {

           return (

            <View style={[styles.flex,styles.topStatus]}>

                <Search></Search>

            </View>

        );
       }
}

class Search extends Component {
    render(){
        return(
            <View style={[styles.flex,styles.flexDirection]}>
                <View style={[styles.flex,styles.input]}>

                    <TextInput  returnKeyType="search" />

                </View>

                <View style={styles.btn}>
                    <Text style={styles.search}>搜索</Text>
                </View>
            </View>

        );
    }
}

const styles = StyleSheet.create({

    flex:{
        flex:1,

    },
    flexDirection:{
        flexDirection:'row',
    },
    topStatus:{
        marginTop:25,
    },
    input:{
        height:45,
        borderColor:'red',
        borderWidth:1,
        marginLeft:10,
        paddingLeft:10,
        borderRadius:5,

    },
    btn:{
        width:45,
        marginLeft:-5,
        marginRight:5,
        backgroundColor:'#23BEFF',
        height:45,
        justifyContent:'center',
        alignItems:'center',
    },
    search:{
        color:'#fff',
        fontSize:15,
        fontWeight:'bold',
    },
});

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

效果如下