• react-native项目实战积累


    1.运行命令

    adb devices     //查询设备,开启设备调试

    adb reverse tcp:8081 tcp:8081     //注:从设备上访问开发服务器(安卓手机是5.0或者以上操作系统)

    react-native run-android //编译项目,将编译好的安装包安装到手机或者模拟器中

    ./gradlew assembleRelease
    /*
    用于生成发行APK包
    生成的APK文件位于android/app/build/outputs/apk/app-release.apk
    在android目录中运行此命令(PowerShell命令中有'./' cmd命令中无'./')
    */

    ./gradlew installRelease
    /*
    用于在设备上安装发行版本(最终测试)
    在android目录中运行此命令(PowerShell命令中有'./' cmd命令中无'./')
    */

    /*
    * 查看console打印的内容
    */
    1)Android

      react-native log-android

    2)Ios

      react-native log-ios

     

    2.账号

     //商户
    18600000002

    //用户
    18636145259

     

     

     

    3.请求数据

    //请求页面
    let param = {
       access_token: access_token,
       a: 1,
    }
    getData.mobile_login(param).then(res => {
       if (!res.error_code) {
           // console.log('首次信息保存成功!')
      }
    }).catch(error => {

    })

    //getData.js
    // 手机号登录
       mobile_login(params) {
           return Constants.post(baseUrl + '/user/user/login', params);
      },

     

     

    4.路由跳转

    this.props.navigation.navigate('GuanzhuDianpu')

    //传值
    this.props.navigation.navigate('DianpuDetail', {
       shop_id: id,
       user_id: user_id
    });
    //接收
    this.shop_id = this.props.navigation.state.params.shop_id;

     

     

    5.标签

    一、
    <Image
       style={{
              Constants.fitSize(290),
             height: Constants.fitSize(50)
      }}
       source={
           Images.ic_home_nearby_shops
      }
    ></Image>


    二、
    const navParams = {
               navName: '购物车',
    }
    const styles = StyleSheet.create({
       container: {
            '100%',
    position: 'relative',
    height: Constants.fitSize(230),
           paddingBottom: Constants.fitSize(30),
           fontSize: Constants.setFontSize(28)
      },
    })
    <View>
           <Text style={{ color: Colors.white_fff }}>1111</Text>
    <Text style={ styles.container }>{navParams.navName}</Text>
    </View>


    三、触摸操作
    <TouchableOpacity
           style={styles.button}
           onPress={() => this.onPress()}
    >
           <Text>点击選擇</Text>
    </TouchableOpacity>

    onPress = ()=>{
       this.setState({ checked: !this.state.checked})
    }


    四、input

    属性:
    multiline:false/true,
    默认值为 false,为true文本框中可以输入多行文字。(注意:keyboardType为numeric不生效)
    //单行
    <TextInput
       style={{
              flex:1,
              fontSize:Constants.setFontSize(36)
      }}
       placeholderTextColor="#333333"
       placeholder='请输入提现余额'
       keyboardType="numeric"
       underlineColorAndroid='transparent'
       onChangeText={(text) => {
           this.setState({ searchText: text });
      }}>
    </TextInput>

    //多行
    <TextInput
       style={[{
                  "100%",
                  height: 100,
                  textAlignVertical: 'top',
                  fontSize:Constants.setFontSize(28)
              }]}
       placeholder={"宝贝满足你的期待吗?说说你的使用心得,分享给想买的他们吧!"}
       placeholderTextColor={"#A7A7A7"}
       value={this.state.intro}
       maxLength={200}
       underlineColorAndroid='transparent'
       multiline = {true}
       onChangeText={(intro) => this.setState({intro})}
    />


    五、ScrollView 超出屏幕高度实现滚动
    <ScrollView style={{ flex: 1 }}></ScrollView>


    六、Switch 开关
    <Switch
       onTintColor='#ff712d'
       value={this.state.setNotice}
       onValueChange={(value) => {
           this.setState({
               setNotice:!this.state.setNotice
          })
    }}
    />

     

     

    6.css

    //display:flex
    flexDirection: "row"   等价于   display:flex
               row: child水平方向排列
               column: child竖直方向排列(默认)
               row-reverse: child水平方向反向排列
               column-reverse: child竖直方向反向排列


    //border
    borderColor:'#F2F2F2',
    borderStyle:'solid',
    borderBottomWidth:Constants.fitSize(10),
             等价于
    border:1px solid #f2f2f2;


    //显示省略号:
    <Text numberOfLines={1} ellipsizeMode={'tail'}></Text>
       当字数太多的时候我们需要省略号来显示多余的字,使用Text的属性
       第一个是:(几行显示),
       第二个是:(省略号显示的位置),
           默认的是tail (尾部) 
           头部 head
           中间 middle
           
           
           
    paddingHorizontal:Constants.fitSize(38),//左右
    paddingVertical:Constants.fitSize(48),//上下

     

    7.模板

    import React,{Component} from 'react';
    import { View, Text, Image, StyleSheet, BackHandler, DeviceEventEmitter, TouchableOpacity, ToastAndroid, Alert, TextInput } from 'react-native';
    import { Colors, Images, Constants, getData } from '../../../resource/';
    import TopNav from "../../../components/common/TopNav.component";


    export default class pictureDemo extends Component {
       constructor(props){
           super(props);
           this.state = {

          }
      }

     render(){
       const navParams = {
           navName: '默认页面',
           navColor: '#ff712d',
           hasShare: false,
           hasbackIcon: true,
           isShowTxt: true,
           cancel: true,
           navigation: this.props.navigation
      }
       return (
           <View style={{flex:1}}>
               <TopNav {...navParams}></TopNav>
               <Text>默认页面</Text>
           </View>
      )
    }
    }

    const styles = StyleSheet.create({
     
    })

     

     

     

    8.注释

    {/* 文本输入框 */}

     

     

    9.弹框

    Alert.alert(
       '标题',
       '内容',
      [
          {
               text: '确定', onPress: () => {
              }
          },
          {
               text: '取消', onPress: () => {
              }
          },
      ],
      { cancelable: false }
    )

     

    8.查看console打印

    在调试React Native 程序的时候,如果想要看到console的打印出来的内容,在cmd命令中输入以下命令

    1)Android

      react-native log-android

    2)Ios

      react-native log-ios

     

     

    9.按钮

    import BigButton from "../../../components/common/BigButton.component";

    const btnParams = {
               btn_txt: '确定注销',
               padding_top: 430,
               btn_ 300,
               btn_height: 80,
               btn_bg: '#FD4444',
               font_size: 30,
               borderRadius: 80,
    }    
    <View>
             <BigButton {...btnParams} btnClick={this.btnClick} />
    </View>

     

     

    10.react-native-elements

    一、ListItem
    列表项,用于显示信息行,如联系人列表、播放列表或菜单。它们非常可定制,可以包含开关、头像、徽章、图标等。
    navList: [
      {
           title: '微信充值到钱包',
           detail: '1',
           icon: <Image
           source={Images.wx}
           style={{ Constants.fitSize(67), height: }}
           />,
           rightIcon: <AntDesign
               name="right"
               size={22}
               color='#D1D1D1'
               type='font-awesome'
               containerStyle={{ paddingRight: 25 }}/>
    },
    ...
    ]
    {this.state.navList.map((l, i) => (
    <ListItem
           key={i}
           activeOpacity={0.8}
           title={l.title}
           subtitle={l.subtitle}
           leftIcon={l.icon}
           rightIcon={l.rightIcon}
           containerStyle={[//指定某个listitem换行,圆角
                   styles.ListItemContainer,
                  {
                       marginBottom: i == 1 || i == 3 ? Constants.fitSize(24) : 0
                  },
                   i == 0 || i == 2 || i==4? styles.borderReadius1 : {},
                   i == 1 || i == 3 || i==6 ? styles.borderReadius2 : {}
          ]}
    titleStyle={{ fontSize: Constants.setFontSize(33), color: '#333' }}
           subtitleStyle={{ }}
           onPress={() => {}}
    />
    ))}


    二、CheckBox 复选框
       <CheckBox
           onPress={() => this.onPress1()}
           checked={this.state.checked1}
           checkedColor='#F54040'
           size={20}
           containerStyle={{
                    padding: 0,
          }}
    />

     

     

    11.布局

    //列表项布局
    <TouchableOpacity
       style={styles.button}
       onPress={() => this.props.navigation.navigate('cancelAccount1')}
    >
      <View style={[styles.cellItem, { height: Constants.fitSize(98) }]} >
           <Text style={{
                       fontSize: Constants.setFontSize(30), color: '#333'
          }}>
               注销账户
           </Text>
      <View style={{ flexDirection: 'row', alignItems: 'center' }} >
               <Text style={{color:'#F54040'}}>请谨慎操作</Text>
          <Image
    style={{
                      Constants.fitSize(15), height: Constants.fitSize(26), marginLeft: Constants.fitSize(30)
      }}
                   source={
                       Images.ic_login_right_arrow
                  }>
                       </Image>
           </View>
      </View>
    </TouchableOpacity>



    const styles = StyleSheet.create({
       cellItem: {
           borderBottomColor: '#e5e5e5',
           borderBottomWidth: Constants.fitSize(1),
           borderTopColor: '#e5e5e5',
           borderTopWidth: Constants.fitSize(1),
           flexDirection: 'row',
           alignItems: 'center',
           justifyContent: 'space-between',
           backgroundColor: '#fff',
           paddingLeft: Constants.fitSize(30),
           paddingRight: Constants.fitSize(20),
      }
    })

     

     

     

    12.复制文字

    import { ToastAndroid,Clipboard} from 'react-native';

    btnClick = ()=>{
       Clipboard.setString('我是被复制的文字')
       ToastAndroid.show('复制成功', ToastAndroid.LONG);
    }

     

  • 相关阅读:
    新新人加入博客园
    C#通过第三方组件生成二维码(QR Code)和条形码(Bar Code)
    关于delphi 类的属性定义property方法
    从XML文件乱码问题,探寻其背后的原理
    Clang RecursiveASTVisitor & ASTFrontendActions based on it
    Clang FrontendActions
    C++ 学习笔记
    Clang Preprocessor 类的创建
    世上最伟大的十个公式
    RestEasy+用户指南第5章.@PathParam
  • 原文地址:https://www.cnblogs.com/fanqiuzhuji/p/13356277.html
Copyright © 2020-2023  润新知