react-native項目經驗

修改端口號：node_modules\react-native\local-cli\server\server.js

生成apk：react-native run-android --variant=release

編譯項目：react-native  start

1. 聲明樣式：var styles=StyleSheet.create({

base:{width:38,height:38},

background:{backgroundColor:’#222’},

active:{borderWidth:2,borderColor:#ccc},

})

1. CSS的命名「-」連字符改爲駝峯寫法，長度不加單位「px」，字符串好比色值須要加引號寫成字符串。
2. 標籤訂義樣式：<View style={styles.base}/>

定義多個樣式：<View style={[styles.base,styles.background]}/>

在兩個樣式裏面內容有衝突的時候，以右邊的值優先，還能夠加判斷此樣式在什麼條件下會顯示：<View style={[styles.base,this.state.active&&styles.active]}

&&左邊是true/false 右邊是樣式

1. 隱藏頭部：static navigationOptions = () => ({ headerStyle: {display:'none'}})
2. 跳轉頁面傳參數：<TouchableOpacity style={styles.login} onPress={() => {navigate('Procedure',{ user:'this.state.user', pwd:'this.state.pwd' } );}}> 傳參數方法
3. 本身建的組件名首字母大寫
4. 返回上一級：this.props.navigation.goBack()
5. 循環組件：{this.state.procedure.map((info, index) => (

<Procedure info={info} key={index}></Procedure>

     ))}

    Procedure爲將要循環的數組

1. 強制刷新：this.forceUpdate();
2. TextInput只能是數字： keyboardType='numeric'
3. 點擊函數調用接口 函數前加：async  函數名第一個字母大寫  調用代碼前加：await
4. 進入頁面後作事情：componentDidMount(){   }
5. 返回頁面刷新頁面：A頁面跳到B頁面  B頁面返回A頁面時  A頁面刷新

A頁面寫：componentDidMount() {

            this.listener = DeviceEventEmitter.addListener('Updata',(e)=>{

              alert(e)

                               這裏寫須要更新的函數

            });

}

componentWillUnmount(){

  this.listener.remove();

}

         B頁面寫：DeviceEventEmitter.emit('Updata');

1. onPress={this.settings.bind(this)}  把控件的this和函數的this綁定成一個this 點擊若是加.bind就須要把this傳過去
2. 對齊方式：

a)         justifyContent:'flex-start', // 左對齊，默認值

b)         justifyContent:'flex-end', // 右對齊

c)         justifyContent:'center', // 居中

d)         justifyContent:'space-between', // 兩端對齊，項目之間間隔相等 

e)         justifyContent:'space-around', // 每一個項目兩端的間隔相等。因此項目間的間隔比項目與邊框的間隔大一倍

f)          alignItems:'flex-start', // 交叉軸起點對齊

g)         alignItems:'flex-end', // 交叉軸終點對齊

h)         alignItems:'center', // 交叉軸中點對齊

i)           alignItems:'baseline', // 項目第一行文字的基線對齊

j)           alignItems:'stretch', // 若是項目未設置高度或設爲auto，將佔滿整個容器的高度

1. TextInput 標籤：

underlineColorAndroid='transparent'     去掉下劃線

1. 父級頁面往本身頁面傳屬性或者值 須要更改父級頁面調用時的key值 不然不會刷新

例：<ScanList info={info} key={index+""+this.state.showPop} show={this.state.showPop} navigation={this.props.navigation}/>

1. 內容橫向排列 ：flexDirection: 'row',  內容到尾部自動換行：flexWrap:'wrap',
2. Pda調用掃描：安裝DeviceEventEmitter  插件  在文件上面引入：DeviceEventEmitter 

a)         打開掃描：LeZhanTools.openScan(); LeZhanTools.Vibrate(1);

b)         關閉掃描：LeZhanTools.closeScan();

c)         讀取掃描出來的信息：DeviceEventEmitter.addListener('ScanCode', function(e: Event) {

d)                                                         alert(JSON.stringify(e)+"222222222")

e)                                              });

1. ref={(e)=>{this.ModalDropdown2 = e}}  在須要操做這個標籤的函數裏面寫this.ModalDropdown2.select(0)  這樣就能夠操做這個標籤擁有的函數了 
2. 判斷某個元素顯示不顯示：{this.state.show?null:<Text>這是條件語句</Text>}
3. 按返回鍵觸發函數:

BackHandler在上面引入。from 'react-native'

componentDidMount() {

this.listenerhardwareBackPress=BackHandler.addEventListener('hardwareBackPress',  ()=> {

           this.backClick();

           return true;

        });

    }

1. 若是ScrollView標籤不能自適應高度  則在最外層標籤加 flex:1的樣式
2. 子組件調用父組件函數：父組件：<List back={this.BackClick.bind(this)}></List>

子組件：back(){ this.props.back()}

1. 點擊函數跳轉頁面：onPress={this.login.bind(this)};login(){const{navigate}= this.props.navigation;navigate('Procedure');}
2. 禁止重複點擊：修改源碼 
   位於：../node_modules/react-navigation/src/addNavigationHelper.js 

修改以下：

......

......

export default function<S: {}>(

  navigation: NavigationProp<S>

): NavigationScreenProp<S> {

  /*  ------------此處爲添加的代碼--------- */

  let debounce = true;//  定義判斷變量

  /*  ------------此處爲添加的代碼--------- */

  return {

    ...navigation,

    goBack: (key?: ?string): boolean => {

      let actualizedKey: ?string = key;

      if (key === undefined && navigation.state.key) {

        invariant(

          typeof navigation.state.key === 'string',

          'key should be a string'

        );

        actualizedKey = navigation.state.key;

      }

      return navigation.dispatch(

        NavigationActions.back({ key: actualizedKey })

      );

    },

    navigate: (

      routeName: string,

      params?: NavigationParams,

      action?: NavigationNavigateAction

  /*  ------------此處爲修改後的的代碼--------- */

    ): boolean =>{

      if (debounce) {

        debounce = false;

        navigation.dispatch(

          NavigationActions.navigate({

            routeName,

            params,

            action,

          }),

        );

        setTimeout(

          () => {

            debounce = true;

          },

          5000,

        );

        return true;

      }

      return false;

    },

  /*  ------------此處爲修改後的的代碼--------- */

......

 

 

1. 橫向進出頁面：const HelloRN = StackNavigator({

 

},{

  transitionConfig: horizontalInterpolator

})

上面定義：const horizontalInterpolator = () => ({screenInterpolator: CardStackStyleInterpolator.forHorizontal})

import CardStackStyleInterpolator from 'react-navigation/src/views/CardStack/CardStackStyleInterpolator';

 

1. 文本超出…顯示:

{this.state.inner1Con ? (this.state.inner1Con.length > 7 ? this.state.inner1Con.substr(0, 7) + "..." : this.state.inner1Con) : "請選擇"}

1. 虛線:

<View style={styles.lineDashed}></View>

lineDashed:{

     width:width,

     height:0,

     borderWidth:1,

     borderColor:'#ccc',

     borderStyle:'dashed',

borderRadius:0.1,

   },

1. 左滑刪除:

import { Switch,SwipeAction } from 'antd-mobile-rn';

 

const right = [{

        text: '刪除',

        onPress: () => alert('delete'),

       style: { backgroundColor: 'red', color: 'white' },

},];

 

<SwipeAction autoClose right={right}>

  <Text>這行左滑刪除</Text>

</SwipeAction>

 

1. 檢測設備是否聯網

import { NetInfo } from 'react-native';

   //檢測網絡是否鏈接

    NetInfo.isConnected.fetch().done((isConnected) => {

      alert(isConnected + '==檢測網絡是否鏈接')

    });

 

    //檢測網絡鏈接信息

    NetInfo.fetch().done((connectionInfo) => {

      alert(connectionInfo + '==檢測網絡鏈接信息')

    });

 

    //監聽網絡變化事件

    NetInfo.addEventListener('change', (networkType) => {

      alert(networkType + '==監聽網絡變化事件')

    })

 

 

 

ANT  UI

1. onClick={() => this.orderClick()}
2. 列表樣式  List標籤裏面的Item裏面的內容 手寫沒事  若是是動態數據會和以前寫死的內容再也不一行   解決辦法：用Text把內容包起來<Text style={{fontSize:17}}>訂單號：{info.con}</Text>