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