React Native实例

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

本文主要包括以下内容

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

View组件的实例

效果如下

这里写图片描述

代码如下

  1. /**
  2.  * Sample React Native App
  3.  * https://github.com/facebook/react-native
  4.  * @flow
  5.  */
  7. import React, { Component } from 'react';
  8. import {
  9.   AppRegistry,
  10.   StyleSheet,
  11.   Text,
  12.     PixelRatio,
  13.   View
  14. } from 'react-native';
  16. class Abc extends Component {
  17.   render() {
  18.     return (
  19.      <View style={styles.flex}>
  20.       <View style={styles.container}>
  21.         <View style={[styles.item,styles.center]}>
  23.           <Text style={styles.font}>酒店</Text>
  25.         </View>
  27.         <View style={[styles.item,styles.lineLeftRight]}>
  29.           <View style={[styles.center,styles.flex,styles.lineCenter]}>
  30.             <Text style={styles.font}>海外酒店</Text>
  31.           </View>
  33.           <View style={[styles.center,styles.flex]}>
  34.             <Text style={styles.font}>特惠酒店</Text>
  36.           </View>
  40.         </View>
  44.         <View style={styles.item}>
  46.           <View style={[styles.center,styles.flex,styles.lineCenter]}>
  47.             <Text style={styles.font}>团购</Text>
  48.           </View>
  50.           <View style={[styles.center,styles.flex]}>
  51.             <Text style={styles.font}>客栈，公寓</Text>
  53.           </View>
  58.         </View>
  59.       </View>
  61.         </View>
  62.     );
  63.   }
  64. }
  66. const styles = StyleSheet.create({
  67.  container: {
  68.     marginTop:200,
  69.     marginLeft:5,
  70.     marginRight:5,
  71.     height:84,
  72.     flexDirection:'row',
  73.     borderRadius:5,
  74.     padding:2,
  75.     backgroundColor:'#FF0067',
  76.   },
  77.   item: {
  78.     flex: 1,
  79.     height:80,
  81.   },
  82.   center:{
  83.     justifyContent:'center',
  84.     alignItems:'center',
  85.   },
  86.   flex:{
  87.     flex:1,
  88.   },
  89.   font:{
  90.     color:'#fff',
  91.     fontSize:16,
  92.     fontWeight:'bold',
  93.   },
  94.   lineLeftRight:{
  95.     borderLeftWidth:1/PixelRatio.get(),
  96.     borderRightWidth:1/PixelRatio.get(),
  97.     borderColor:'#fff',
  98.   },
  99.   lineCenter:{
  100.     borderBottomWidth:1/PixelRatio.get(),
  101.     borderColor:'#fff',
  102.   },
  103. });
  105. AppRegistry.registerComponent('Abc', () => Abc);

Text组件实例

head.js

  1. /**
  2.  * Sample React Native App
  3.  * https://github.com/facebook/react-native
  4.  * @flow
  5.  */
  7. import React, { Component } from 'react';
  8. import {
  9.   AppRegistry,
  10.   StyleSheet,
  11.   Text,
  12.     PixelRatio,
  13.   View
  14. } from 'react-native';
  16. class Header extends Component {
  18.   render() {
  19.     return (
  20.        <View style={styles.flex}>
  21.                 <Text style={styles.font}>
  23.                     <Text style={styles.font_1}>网易</Text>
  24.                     <Text style={styles.font_2}>新闻</Text>
  25.                     <Text>有态度"</Text>
  26.                 </Text>
  28.         </View>
  29.     );
  30.   }
  31. }
  33. const styles = StyleSheet.create({
  34.   flex:{
  35.         marginTop:25,
  36.         height:50,
  37.         borderBottomWidth:3/PixelRatio.get(),
  38.         borderBottomColor:'#EF2D36',
  39.         alignItems:'center',
  40.     },
  41.     font:{
  42.         fontSize:25,
  43.         fontWeight:'bold',
  44.         textAlign:'center',
  45.     },
  46.     font_1:{
  47.         color:'#CD1D1C',
  48.     },
  49.     font_2:{
  50.         color:'#FFF',
  51.         backgroundColor:'#CD1D1C',
  52.     },
  53. });
  55. module.exports=Header;

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

主JS详细代码

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

  1. /**
  2.  * Sample React Native App
  3.  * https://github.com/facebook/react-native
  4.  * @flow
  5.  */
  7. import React, { Component } from 'react';
  8. import {
  9.   AppRegistry,
  10.   StyleSheet,
  11.   Text,
  12.     PixelRatio,
  13.   View
  14. } from 'react-native';
  16. const Header=require('./head');
  18. class Abc extends Component {
  20.   render() {
  21.     return (
  22.      <View style={styles.flex}>
  23.             <Header></Header>
  24.             <List title='一线城市楼市退烧 有房源一夜跌价160万'></List>
  25.             <List title='上海市民称墓地太贵买不起 买房存骨灰'></List>
  26.             <List title='朝鲜再发视频:摧毁青瓦台 一切化作灰烬'></List>
  27.             <List title='生活大爆炸人物原型都好牛逼'></List>
  29.              <ImportantNews
  30.                 news={[
  31.                 '解放军报报社大楼正在拆除 标识已被卸下(图)',
  32.                 '韩国停签东三省52家旅行社 或为阻止朝旅游创汇',
  33.                 '南京大学生发起亲吻陌生人活动 有女生献初吻-南京大学生发起亲吻陌生人活动 有女生献初吻-南京大学生发起亲吻陌生人活动 有女生献初吻',
  34.                 '防总部署长江防汛:以防御98年量级大洪水为目标'
  35.                 ]}>
  36.             </ImportantNews>
  37.       </View>
  39.     );
  40.   }
  41. }
  44. class List extends Component{
  46.     render(){
  47.         return (
  48.             <View style={styles.list_item}>
  49.                <Text style={styles.list_item_font}>{
  50.    this.props.title}</Text>
  51.             </View>
  52.         );
  53.     }
  54. }
  57. class ImportantNews extends Component{
  60.     show(title){
  62.         alert(title);
  64.     }
  67.     render(){
  68.         var news=[];
  69.         for(var i in this.props.news){
  70.             var text=(
  71.                 <Text
  72.                     onPress={
  73.    this.show.bind(this,this.props.news[i])}
  74.                     numberOfLines={
  75.    2}
  76.                     style={styles.news_item}
  77.                     key={i}
  79.                     >{
  80.    this.props.news[i]}</Text>
  81.             );
  82.             news.push(text);
  83.         }
  84.         return (
  85.             <View style={styles.flex}>
  86.                 <Text style={styles.news_title}>今日要闻</Text>
  87.                 {news}
  89.             </View>
  91.         );
  92.     }
  93. }
  95. const styles = StyleSheet.create({
  96.   flex:{
  97.     flex:1,
  98.   },
  100.     list_item:{
  101.         height:40,
  102.         marginLeft:10,
  103.         marginRight:10,
  104.         borderBottomWidth:1,
  105.         borderBottomColor:'#ddd',
  106.         justifyContent:'center',
  107.     },
  109.     list_item_font:{
  110.         fontSize:16,
  111.     },
  113.     news_item:{
  114.         marginLeft:10,
  115.         marginRight:10,
  116.         fontSize:15,
  117.         lineHeight:40,
  118.     },
  120.     news_title:{
  121.         fontSize:20,
  122.         fontWeight:'bold',
  123.         color:'#CD1D1C',
  124.         marginLeft:10,
  125.         marginTop:15,
  127.     },
  128. });
  130. AppRegistry.registerComponent('Abc', () => Abc);

效果如下

这里写图片描述

这里写图片描述

Navigator组件实例

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

  1. /**
  2.  * Sample React Native App
  3.  * https://github.com/facebook/react-native
  4.  * @flow
  5.  */
  7. import React, { Component } from 'react';
  8. import {
  9.   AppRegistry,
  10.   StyleSheet,
  11.    Navigator,
  12.    ScrollView,
  13.   Text,
  14.     PixelRatio,
  15.   View
  16. } from 'react-native';
  18. const Header=require('./head');
  20. class Abc extends Component {
  22.   render() {
  23.      let defaultName='List';
  24.       let defaultComponent=List;
  25.     return (
  26.         <Navigator
  27.             initialRoute={
  28.    { name: defaultName, component: defaultComponent }}
  29.             //配置场景
  30.             configureScene=
  31.                 {
  32.             (route) => {
  34. //这个是页面之间跳转时候的动画，具体有哪些？可以看这个目录下，有源代码的: node_modules/react-//native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js
  36.             return Navigator.SceneConfigs.VerticalDownSwipeJump;
  37.           }
  38.           }
  39.             renderScene={
  40.             (route, navigator) =>
  41.              {
  42.             let Component = route.component;
  43.             return <Component {...route.params} navigator={navigator} />
  44.           }
  45.           } />
  48.     );  }
  49. }
  52. class List extends Component {
  55.     constructor(props) {
  56.         super(props);
  57.         this.state = {
  58.              id:1,
  59.             user:null,
  60.         };
  61.     }
  63.     _pressButton() {
  64.         const { navigator } = this.props;
  65.         //为什么这里可以取得 props.navigator?请看上文:
  66.         //<Component {...route.params} navigator={navigator} />
  67.         //这里传递了navigator作为props
  68.         const self=this;
  69.          if(navigator) {
  70.             navigator.push({
  71.                 name: 'Detail',
  72.                 component: Detail,
  73.                 params:{
  74.                     id:this.state.id,
  75.                     //从详情页获取user
  76.                     getUser: function(user) {
  77.                         self.setState({
  78.                             user: user
  79.                         })
  80.                     }
  81.                 }
  82.             })
  83.         }
  84.     }
  87.     render(){
  88.          if(this.state.user){
  89.             return(
  90.                 <View>
  91.                     <Text style={styles.list_item}>用户信息: { JSON.stringify(this.state.user) }</Text>
  92.                 </View>
  93.             );
  94.         }else{
  95.         return (
  96.             <ScrollView style={styles.flex}>
  97.                <Text style={styles.list_item} onPress={
  98.    this._pressButton.bind(this)} >☆ 豪华邮轮济州岛3日游</Text>
  99.                 <Text style={styles.list_item} onPress={
  100.    this._pressButton.bind(this)}>☆ 豪华邮轮台湾3日游</Text>
  101.                 <Text style={styles.list_item} onPress={
  102.    this._pressButton.bind(this)}>☆ 豪华邮轮地中海8日游</Text>
  103.             </ScrollView>
  104.         );
  105.     }
  106.     }
  109. }
  112. const USER_MODELS = {
  113.     1: { name: 'mot', age: 23 },
  114.     2: { name: '晴明大大', age: 25 }
  115. };
  117. class Detail extends Component{
  120.     constructor(props) {
  121.         super(props);
  122.         this.state = {
  123.              id:null
  125.         };
  126.     }
  128.       componentDidMount() {
  129.         //这里获取从FirstPageComponent传递过来的参数: id
  130.         this.setState({
  131.             id: this.props.id
  132.         });
  133.     }
  135.     _pressButton() {
  136.         const { navigator } = this.props;
  137.         if(this.props.getUser) {
  138.             let user = USER_MODELS[this.props.id];
  139.             this.props.getUser(user);
  140.         }
  141.         if(navigator) {
  142.             //很熟悉吧，入栈出栈~ 把当前的页面pop掉，这里就返回到了上一个页面:List了
  143.             navigator.pop();
  144.         }
  145.     }
  147.     render(){
  148.         return(
  150.             <ScrollView>
  151.              <Text style={styles.list_item} >传递过来的用户id是：{
  152.    this.state.id}</Text>
  153.               <Text style={styles.list_item} onPress={
  154.    this._pressButton.bind(this)} >点击我可以跳回去</Text>
  156.             </ScrollView>
  158.         );
  159.     }
  160. }
  164. const styles = StyleSheet.create({
  165.   flex:{
  166.     flex:1,
  168.   },
  169.     list_item:{
  170.         height:40,
  171.         marginLeft:10,
  172.         marginRight:10,
  173.         fontSize:20,
  174.         borderBottomWidth:1,
  175.         borderBottomColor:'#ddd',
  176.         justifyContent:'center',
  177.     },
  178. });
  180. AppRegistry.registerComponent('Abc', () => Abc);

效果如下

这里写图片描述

TextInput组件实例

  1. /**
  2.  * Sample React Native App
  3.  * https://github.com/facebook/react-native
  4.  * @flow
  5.  */
  7. import React, { Component } from 'react';
  8. import {
  9.   AppRegistry,
  10.   StyleSheet,
  11.    Navigator,
  12.    ScrollView,
  13.    TextInput,
  14.   Text,
  15.     PixelRatio,
  16.   View
  17. } from 'react-native';
  20. class Abc extends Component {
  22.   render() {
  24.            return (
  26.             <View style={[styles.flex,styles.topStatus]}>
  28.                 <Search></Search>
  30.             </View>
  32.         );
  33.        }
  34. }
  37. class Search extends Component {
  39.     render(){
  40.         return(
  41.             <View style={[styles.flex,styles.flexDirection]}>
  42.                 <View style={[styles.flex,styles.input]}>
  44.                     <TextInput  returnKeyType="search" />
  46.                 </View>
  49.                 <View style={styles.btn}>
  50.                     <Text style={styles.search}>搜索</Text>
  51.                 </View>
  52.             </View>
  54.         );
  55.     }
  56. }
  60. const styles = StyleSheet.create({
  62.     flex:{
  63.         flex:1,
  65.     },
  66.     flexDirection:{
  67.         flexDirection:'row',
  68.     },
  69.     topStatus:{
  70.         marginTop:25,
  71.     },
  72.     input:{
  73.         height:45,
  74.         borderColor:'red',
  75.         borderWidth:1,
  76.         marginLeft:10,
  77.         paddingLeft:10,
  78.         borderRadius:5,
  80.     },
  81.     btn:{
  82.         width:45,
  83.         marginLeft:-5,
  84.         marginRight:5,
  85.         backgroundColor:'#23BEFF',
  86.         height:45,
  87.         justifyContent:'center',
  88.         alignItems:'center',
  89.     },
  90.     search:{
  91.         color:'#fff',
  92.         fontSize:15,
  93.         fontWeight:'bold',
  94.     },
  95. });
  97. AppRegistry.registerComponent('Abc', () => Abc);

效果如下

这里写图片描述

发表评论

表情：
评论列表 （有 0 条评论，242人围观）

还没有评论，来说两句吧...

相关阅读

    相关 react native

    React Native使你能够在Javascript和[React][]的基础上获得完全一致的开发体验，构建世界一流的原生APP。 React Native

    朱雀朱雀/ 0 赞/ 362 阅读

    相关 React Native实例

    本文主要包括以下内容 1. View组件的实例 2. Text组件实例 3. Navigator组件实例 4. TextInput组件实例 View组件的实例

    女爷i女爷i/ 0 赞/ 243 阅读