React Native实例

女爷i 2022-09-21 15:29 195阅读 0赞

**本文主要包括以下内容**

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

### View组件的实例 ###

**效果如下**

![这里写图片描述][20160624155046443]

**代码如下**

### Text组件实例 ###

**head.js**

将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);

**效果如下**

![这里写图片描述][20160624182446906]

![这里写图片描述][20160624182458596]

### 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);

**效果如下**

![这里写图片描述][20160624201649400]

### 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);

**效果如下**

![这里写图片描述][20160624205238566]

[20160624155046443]: /images/20220721/4ac72d4e2e5a4af7b785d60a1aaf2f3d.png
[20160624182446906]: /images/20220721/0504c894fdee418b85da5685ec726083.png
[20160624182458596]: /images/20220721/c2107d8d4f3c402c9a971a18b811d9e4.png
[20160624201649400]: /images/20220721/8c3f172e79994dfa9795272d412f507a.png
[20160624205238566]: /images/20220721/aa5d6102664e4cbfac0be8e22b9ad72f.png