React Native实例

最新推荐文章于 2024-09-21 23:30:00 发布
最新推荐文章于 2024-09-21 23:30:00 发布
阅读量2.6k 收藏 1
点赞数
分类专栏： React 文章标签： native stylesheet native app 实例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/whuhan2013/article/details/51753396
版权

本文主要包括以下内容

  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传递数据并回传数据，在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);

效果如下

这里写图片描述

Ricardo.M.Jiang
关注
专栏目录
ReactNative开发实例带你入门reactnative开发
08-10
这个“ReactNative开发实例带你入门reactnative开发”的资源，显然是一个针对初学者的教程，旨在帮助他们理解并掌握React Native的基本概念、架构以及实际开发流程。 React Native的核心理念是“Learn Once, Write ...
ReactNative开发(四)之小项目开发案例
Jacky_Can的博客
08-23 1904
一、项目简介对于学习来说，效率最高的就方式就是实战，刚开始学习React-Native 有很多语法还不习惯，但是在自己去做项目的时候慢慢熟悉了，越来越得心应手，下面介绍下我做的这个小项目来试试水，这个项目主要还是为了练习熟悉React-Native 中的控件，库的使用和网络请求后数据的加载这几个部分，对于深入的去做，现在并没有涉及到，我们来看看项目的几个截图： 二、主界面的框架搭建这里主要用到了
React Native在企业中的应用案例有哪些？
最新发布
guo162308的博客
09-21 391
*应用场景**：Airbnb曾尝试使用React Native来开发其移动应用，尽管后来决定回归原生开发，但这一尝试为React Native的应用提供了宝贵的经验。**应用场景**：Facebook在其移动应用中广泛使用了React Native，特别是在广告管理工具和一些新功能的开发中。**应用场景**：Bloomberg使用React Native开发了其移动应用，提供实时的金融信息和数据。**应用场景**：Discord利用React Native开发了其移动应用，以提供统一的用户体验。
使用React Native实现原生级别的APP：实战案例分享
AI天才研究院
01-09 1390
1.背景介绍 React Native是Facebook开发的一种跨平台移动应用开发框架，它使用JavaScript编写代码，并将其编译为原生代码，从而实现与原生应用一样的性能和用户体验。React Native已经广泛应用于移动应用开发中，包括Facebook、Instagram、Airbnb等知名公司的应用。 在本篇文章中，我们将分享一些实战案例，展示如何使用React Native实现原...
React Native开源项目案例
weixin_30820151的博客
01-18 360
(六).React Native开源项目: 1.Pober Wong_17童鞋为gank.io做的纯React Native项目,开源地址:https://github.com/Bob1993/React-Native-Gank 2.聂风童鞋做的《都看影视》React Native项目,开源地址:https://github.com/changfuguo/doukanmv 3.大大...
React Native在美团外卖客户端的实践，2024年Android开发突破20k有哪些有效的路径
m0_57502067的博客
03-23 1232
引入MRN后，相对单平台而言，架构层级上，我们增加了2个MRN中间层去屏蔽Android和iOS平台、原生组件之间的差异。这样做的目的是为了让上层业务开发者可以很快地使用框架进行业务开发，完全不用关心平台和组件间的差异。通过引入MRN技术栈，带来的好处很明显：（1）使用MRN实现的页面理论上可以实现一套代码，部署到不同平台上，开发效率得到大幅度提升。（2）采用MRN框架，无论是加载性能还是页面滑动性的用户体验上，都会比原来H5的方式要好。（3）部分页面具备了快速编译、快速发布的能力。
reactNative游戏app实例源码
01-27
这个"reactNative游戏app实例源码"是为初学者提供的一款教学资源，旨在帮助新接触ReactNative的人快速理解其基本概念和组件的运用。 在ReactNative中，组件是构建用户界面的基本单元。它们就像独立的、可重用的小型...
ReactNative页面跳转实例代码
09-01
本实例将详细介绍如何在React Native中实现页面间的导航。以下是你需要知道的关键知识点： 1. **初始化项目**： 首先，通过`react-native init`命令创建一个新的项目，如示例中的`NavigatorProject`。这将生成一个...
React Native Demo
02-22
综上所述，React Native Demo是一个全面展示React Native功能的实例，涵盖了从基本UI构建到高级功能如原生模块、状态管理和动画的各个方面。通过学习和探索这个项目，开发者可以深入了解React Native的特性和最佳...
React Native 之 项目实战（一）
duzanuolu的专栏
03-18 539
前言 本文有配套视频，可以酌情观看。文中内容因各人理解不同，可能会有所偏差，欢迎朋友们联系我。文中所有内容仅供学习交流之用，不可用于商业用途，如因此引起的相关法律法规责任，与我无关。如文中内容对您造成不便，转载麻烦注明出处，谢谢。 ES5转ES6 关于ES6语法，建议大家可以看下阮老师的 ECMAScriot 6快速了解的话，大家可以参考一下 es6语法快速上
十个优质React-Native开源项目
申徒嘉的专栏
07-31 1494
React Native Firebase 是 Firebase 的 React Native 封装，提供了 Firebase 的所有功能，如身份验证、数据库、存储等。React Native Elements 是一个跨平台的 React Native UI 工具包，提供了丰富的 UI 组件，帮助开发者快速构建应用。React Native Vision Camera 是一个高性能的相机库，提供了丰富的功能和高度的可定制性，适用于 React Native 应用。它支持拍照、录像、实时处理等功能。
React Native详解和代码实例
Web3 & Basketball
07-31 1494
React Native 是一个用于构建原生移动应用程序的 JavaScript 框架。它使用 React 库，允许开发者使用 JavaScript 编写应用程序的 UI 和逻辑，并将其转换为本地平台（iOS 和 Android）上的原生视图。React Native 由 Facebook 开发，并于 2015 年发布。截至 2021 年，React Native 已经成为最受欢迎的跨平台移动应用程序开发框架之一。
React-Native学习笔记（一）——结构分析与视图案例
qq_41177361的博客
05-03 818
React Native 目录结构 小霞上手来一个新项目~，踏实搞明白结构和流程???? 一个新的 React Native 项目，根目录下的文件和目录结构如下 └── hello ├── App.js ├── __tests__ ├── android ├── app.json ├── babel.config.js ├── index.js ├── ios ├── m...
React-Native + Mobx项目实战--探花交友APP--项目搭建
jinkngmanka的博客
12-16 879
React Native项目从0到1
React-Native优质开源项目，2024最新大厂前端面试真题解析
2301_76348206的博客
04-01 892
react native 编写的音乐软件8tracks电台客户端React-Native实现的计算器知乎专栏appSegmentfault 客户端糗事百科app孢子社区appDen - 房屋销售app*知乎日报Android版TesterHome社区appFinance - 股票报价appshopping - 购物appzhuiyuan - 追源cms appuestc-bbs-react-native - UESTC清水河畔RN客户端(with Redux)(iOS/Android、Web、桌面多端)
React native RN 开发实例
04-20 558
【代码】React native RN 开发实例。
案例：React Native在字节跳动游戏营销场景中的实践
iOS_开发
08-31 847
????????关注后回复“进群”，拉你进程序员交流群????????作者丨熊文源来源丨前端之巅（ID：frontshow）https://mp.weixin.qq.com/s/KYt...
React Native微信聊天室实例代码详解
本篇文章详细介绍了如何使用React Native技术实现一个仿微信风格的聊天室应用实例。作者结合了react、react-native、react-navigation、react-redux、react-native-swiper、rnPop等热门库和工具，为开发者提供了一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值