react native社群專案知識點

ClausWong發表於2019-02-02

前言

本來想的上一個React專案做完，從容過完1月迎接新年，IT行業的快節奏真是不容許有這種想法；公司把3月上線的react native專案，時間週期活生生壓縮到1月底，真是哭笑不得。這樣只能加加班而且保質保量地完成，還是在介面各種報錯的前提下利用Mock資料。言歸正傳，回到react native專案中來

xcode配置篇

一、iOS APP圖示配置

二、iOS啟動頁配置、各種尺寸封面大小

配置完成icon、launchscreen後，要重啟xcode再編譯方可成功，不然會有快取
Launch Screen蘋果官方解析度大全

TabBar配置篇

一、iPhone X 適配小技巧

應對iphone劉海屏statusbar顏色處理，利用SafeAreaView包裹整個render

    <SafeAreaView style={{backgroundColor:'red'}}></SafeAreaView>
複製程式碼

上面方法雖然能達到效果，但除了statusbar，整個背景都會被color覆蓋，解決辦法如下。（附上stackoverflow參考連結）

    <Fragment>
      <SafeAreaView style={{ flex:0, backgroundColor: 'red' }} />
      <SafeAreaView style={{ flex:1, backgroundColor: 'gray' }}>
        <View style={{ flex: 1, backgroundColor: 'white' }} />
      </SafeAreaView>
    </Fragment>
複製程式碼

二、createBottomTabNavigator 個性化圖示

1、所需要顯現的效果，中間“檢測”圖示比較難定位

2、程式碼

    import { createBottomTabNavigator, createAppContainer, createStackNavigator } from 'react-navigation' // 引入依賴
    
    const TabNavigator = createBottomTabNavigator({
      Home: {
        screen: Home,
        navigationOptions:()=>({
          title:'首頁',
          tabBarIcon: ({tintColor,focused}) => (
            focused ?
              <Image source={require('...')} style={style.nav_icon}/> :
              <Image source={require('...')} style={style.nav_icon}/>
          )
        }),
      },
      Community: {
        screen: Community,
        navigationOptions:()=>({
          title:'社群',
          tabBarIcon: ({tintColor,focused}) => (
            focused ?
              <Image source={require('...')} style={style.nav_icon}/> :
              <Image source={require('...')} style={style.nav_icon}/>
          ),
          tabBarOnPress: ({ navigation, defaultHandler }) => {
            /** 觸發器
             * defaultHandler()、navigation.navigate('Community')
             * 兩個方法都能實現相同效果，跳轉至 Community Component
             */
            defaultHandler()
            navigation.state.params.triggerAvatar()
          }
        })
      },
      Detection: {
        screen: Detection,
        navigationOptions:()=>({
          title:'檢測',
          tabBarLabel: ({tintColor,focused}) => (
            focused ?
              <ImageBackground
                resizeMode="cover"
                source={require('...')}
                imageStyle={styles.midIcon_img_wrap}
                style={styles.midIcon_wrap}>
                <Image source={require('...')} style={styles.midIcon}/>
                <Text style={styles.midIcon_word}>檢測</Text>
              </ImageBackground>
              :
              <ImageBackground
                resizeMode="cover"
                source={require('...')}
                imageStyle={styles.midIcon_img_wrap}
                style={styles.midIcon_wrap}>
                <Image source={require('...')} style={styles.midIcon}/>
                <Text style={styles.midIcon_word}>檢測</Text>
              </ImageBackground>
          )
        }),
      },
      Recover: {
        screen: Recover,
        navigationOptions:()=>({
          title:'康復',
          tabBarIcon: ({tintColor,focused}) => (
            focused ?
              <Image source={require('...')} style={style.nav_icon}/> :
              <Image source={require('...')} style={style.nav_icon}/>
          )
        }),
      },
      Me: {
        screen: Me,
        navigationOptions:()=>({
          title:'我的',
          tabBarIcon: ({tintColor,focused}) => (
            focused ?
              <View style={style.nav_icon_wrap}>
                <Image source={require('...')} style={style.nav_icon}/>
                <MsgSpot/>
              </View>
              :
              <View style={style.nav_icon_wrap}>
                <Image source={require('...')} style={style.nav_icon}/>
                <MsgSpot/>
              </View>
          )
        })
      }
    },{
      initialRouteName:'Home', // 路由最開始訪問
      lazy:true,               // 是否懶載入
      tabBarOptions:{
        activeTintColor:'#0168F5',
        style:{
          borderTopWidth:0,
          shadowOpacity: 0.1,
          shadowRadius: 5,
          shadowColor: '#8B8B8B',
          shadowOffset:{ width:0,height:-4 },
          paddingHorizontal:16
        },
        labelStyle:{fontSize:10,position:'relative',top:-2},
        tabStyle:{paddingTop:2}
      }
    })
    
    //StackNavigator
    const App = createStackNavigator({
      TabNavigator: {screen: TabNavigator, navigationOptions: () => ({gesturesEnabled: true,header: null})},
      HomeDetail: {screen: HomeDetail, navigationOptions: () => ({gesturesEnabled: true,header: null})}
    })
    
    console.disableYellowBox = true // 遮蔽warning彈窗
    export default createAppContainer(App)
複製程式碼

三、TabNavigator站內訊息提示小紅點

思路：這種跨元件間事件操作，可以利用Redux實現，但官方給出的是最新版本不會預設整合，那麼就自己找方法怎麼簡單怎麼來，首先考慮到的是DeviceEventEmitter

import { DeviceEventEmitter } from 'react-native' // 引入
複製程式碼

// spot紅點事件註冊
class MsgSpot extends Component<Props> {
  state = { spotShow:false }
  componentDidMount(){  // tabbar首次渲染訂閱事件
    DeviceEventEmitter.addListener('message',param => {
      this.setState({spotShow:param.spotShow})
      console.log(param)
    })
  }
  render() {
    const {spotShow} = this.state
    return (
      <Fragment>
      {spotShow?<View style={[style.redSpot,style.redSpot_nav]}></View>:null}
      </Fragment>
    )
  }
}
複製程式碼

DeviceEventEmitter.emit('message', {spotShow:true/false}) // 觸發事件
複製程式碼

四、TabNavigator點選觸發事情

// 詳情看上面tabbar
tabBarOnPress: ({ navigation, defaultHandler }) => {
/** 觸發器
 * defaultHandler()、navigation.navigate('Community')
 * 兩個方法都能實現相同效果，跳轉至 Community Component
 */
defaultHandler()
navigation.state.params.triggerAvatar()
}
複製程式碼

五、頁面訂閱事件

componentDidMount(){
    // 訂閱生命週期
    this._listeners = this.props.navigation.addListener('willFocus', ()=>this.xxx())
}
componentWillUnmount(){
    this._listeners.remove() // 移除事件訂閱
}
複製程式碼

react-navigation連結參考

六、導航callback與導航事件註冊

// 跳轉前頁面
startScan = (param) => {}     // 1、註冊回撥
navigate('xxx',{ startScan:this.startScan ,callback:()=>{}})

// 跳轉後 xxx 頁面
state.params.startScan(param) // 1、觸發回撥
state.params.callback({})     // 2、觸發callback    
複製程式碼

滾動事件、佈局篇

一、底部按鈕與ScrollView樣式

<SafeAreaView style={{flex:1}}>
    <ScrollView></ScrollView>
    <Text>Button</Text>
</SafeAreaView>
複製程式碼

二、FlatList 上拉、下拉實現

import {
  FlatList,
  RefreshControl
} from 'react-native'   // 引入

constructor(props){
super(props)
this.dataListFake = []  // 列表資料
this.page     = 1       // 頁碼
this.state = {
  dataList : [],        // 渲染資料
  refresh : true,
  pullDown: false,
  isLast:   false,
  loading:  false       // 正在載入
}
}
componentDidMount() {
    this._onRefresh()
}
renderItem = ({item}) => { return () }
renderFooter = () => {
// 顯示時機
// 1、剛開始載入、之後，不顯示
// 2、下重新整理，消失
// 3、上拉載入，動畫出現
//    載入完，動畫消失；沒有資料，顯示"暫無更多"
const { pullDown, isLast } = this.state
return (
      <View style={[style.footLoad,{paddingBottom:200}]}>
        {pullDown?<Image source={require('../../assets/loading.gif')} style={style.footImg}/>:null}
        {isLast?<Text style={style.footWord}>暫無更多~</Text>:null}
      </View>
    )
}
renderEmpty = () => {
    return (
        <View style={style.renderEmpty}>
            <Text>暫無資料</Text>
        </View>
    )
}

// 下拉重新整理
_onRefresh = () => {
    const {loading} = this.state
    // 是否正在loading
    if (!loading){
      this.page = 1
      this.dataListFake = []
      this.setState({refresh:true,isLast:false})
      this.dataList(dataListCallBack)
    }
    function dataListCallBack(){
      // Toast.success('重新整理成功',800)
    }
}

// 上拉載入
_onEndReached = () => {
    return false // 沒有分頁
    const {isLast,loading} = this.state
    if (!loading){// 是否正在loading
      if (isLast){
        // Toast.sad('暫無更多資料~')
      }else{
        this.page++
        this.setState({pullDown:true})
        this.dataList(dataListCallBack)
      }
    }
    function dataListCallBack(){
      // Toast.message(`第${_this.page}頁`,null,'center')
    }
}

  // 網路請求
  async dataList(callBack) {
    try {
      this.setState({loading:true})
      ...
      let data = {
        ...,
        page:this.page,
        r:10
      }
      let data_string = queryString.stringify(data)
      let url = ...+'?'+data_string
      const response = await axios.get(url)
      setTimeout(()=>{this.setState({loading:false})},800) // complete

      let code = Number(response.data.code)
      let info = response.data.info

      if (code===0){
        let dataList = response.data.data
        this.dataListFake = this.dataListFake.concat(dataList)
        this.setState({dataList:this.dataListFake})
      }else if (code===9000){ // 根據介面情況而定
        setTimeout(()=>{this.setState({isLast:true})},800)
      }else{
        Toast.sad(info)
      }
      setTimeout(()=>{
        this.setState({
          refresh:false,
          pullDown:false
        }) // 不管資料請求如何，狀態歸位
      },800)

      console.log(response.data)
      console.log(this.page)
      callBack()  // 假回撥

    } catch (error) {
      this.setState({refresh:false,pullDown:false,loading:false})
      Toast.fail('網路請求異常')
    }
  }
複製程式碼

render() {
    const { dataList, refresh } = this.state
    return (
      <SafeAreaView style={[style.container,{flex:1}]}>
        <StatusBar barStyle="dark-content"/>
        <FlatList
          contentContainerStyle={styles.introduction}
          data={ dataList }
          renderItem={this.renderItem}
          ListFooterComponent={this.renderFooter}
          ListEmptyComponent={this.renderEmpty}
          keyExtractor={this._keyExtractor}
          onEndReached={ this._onEndReached }
          onEndReachedThreshold={0}
          refreshing={refresh}
          refreshControl={
            <RefreshControl
              refreshing={ refresh }
              colors={['#ff0000', '#00ff00', '#0000ff']}
              progressBackgroundColor={"#ffffff"}
              onRefresh={ this._onRefresh }
            />
          }
        />
      </SafeAreaView>
    )
  }

複製程式碼

雜文篇

一、條形碼掃描 `iOS版本`

react-native-smart-barcode可以解決大部分問題，整合時因為propTypes的引入沒有相容高版本導致報錯，可以去Barcode.js註釋掉static propTypes

// 同時利用頁面訂閱，達到每次顯示頁面重新掃描的目的
this._listeners = this.props.navigation.addListener('didFocus', ()=> this._startScan())
複製程式碼

二、富文字解析顯示 react-native-htmlview

import HTMLView from 'react-native-htmlview' // 引入
複製程式碼

<HTMLView
    value={htmlContent}
    addLineBreaks={false} // 去掉每行之間的空格
    stylesheet={styles}/>
複製程式碼

  p:{
    color:'#666666',
    fontSize:15,
    fontWeight:'400',
    lineHeight:20,
    paddingHorizontal: 0,
    marginTop:5,
    marginBottom:5
  }
複製程式碼

三、swiper滑動應用 `react-native-swiper`

四、上傳多圖

要注意的是傳多圖時axios需要配置的地方

let config = {headers:{'Content-Type':'multipart/form-data'}}
let formData=new FormData()
xxx.forEach((val,key)=>{
  let file = {uri:val.path,type:val.mime,name:val.filename?val.filename:'CAMERA_PHOTO.JPG'}
  formData.append(`img${key}`,file)
})
await axios.post(url,formData,config)
複製程式碼

五、調起打電話

Linking.openURL(`tel:110`)
複製程式碼

六、`react-native-image-crop-picker`圖片上傳遇到的iOS原生問題

1、cd /guyu/ios/podfile
2、cocoapods 安裝配置
	sudo gem install cocoapods
	pod setup
	cd ios
	pod init
# 3、配置下面檔案
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'
# 新增至pod檔案裡面的配置
target 'guyu' do
    pod 'RSKImageCropper'
    pod 'QBImagePickerController'
end
複製程式碼

七、axios處理GET時，URL拼接 `query-string`

query-string更方便拼接url進行Get請求，也方便從url裡面解析出鍵值對來

NPM庫

teaset yarn add teaset
react-native-actionsheet yarn add react-native-actionsheet
react-native-fit-image yarn add react-native-fit-image

React Native面試知識點
2018-03-27
React Native面試
react-native基本知識點（4/4）
2022-04-25
React
React-Native入門（1）-專案工程初識
2018-03-26
React
react native 包學不包會系列--react native開發基礎知識
2019-01-06
React Native
React-Native專案總結
2018-10-23
React
React Native --踩坑記之建立指定 React Native版本的專案
2018-12-03
React Native
react-native 修改專案名稱
2018-05-23
React
React Native整合到現有的原生專案
2018-11-09
React Native
(零) React Native 專案開發拾遺
2024-09-07
React Native
如何在 React Native 專案中使用 MQTT
2022-06-13
React NativeMQQT
React入門知識點整理
2018-05-17
React
基於React-Native0.55.4的語音識別專案全棧方案
2018-10-24
React全棧
react native 包學不包會系列--認識react native
2019-01-01
React Native
React Native專案自動化打包釋出
2018-06-15
React Native
建立一個react-native專案（2/4）
2022-04-25
React
react篇lesson4（react-router）知識點
2021-11-24
React
利用TypeScript構建優雅的React Native專案
2019-03-02
TypeScriptReact Native
原生專案如何從零開始整合 React Native
2022-05-24
React Native
React學習筆記知識點整理
2018-06-29
React筆記
React相關知識點：關於Redux
2019-05-05
ReactRedux
Vue3.x專案開發常用知識點
2022-05-12
Vue
【3月更新】React Native 優秀開源專案大全
2019-03-03
React Native
回顧maven專案的spring boot相關知識點
2021-01-02
MavenSpring Boot
[React Native]react-native-scrollab
2021-09-09
React Native
如何高效管理 React Native 專案中的圖片資源
2019-03-01
React Native
微軟推出針對Windows的React Native開發專案
2019-05-07
微軟WindowsReact Native
從零開始生成一個ios react-native專案
2018-03-27
iOSReact
技術實踐丨React Native 專案 Web 端同構
2021-01-19
React NativeWeb
資訊系統專案管理師-必背的知識點
2020-10-27
專案管理
react篇lesson5（redux-saga）知識點
2021-12-01
ReactRedux
React Native 仿抖音點贊特效
2018-07-19
React Native特效
整合 React Native 到現有的 Android 專案（ Mac, Windows 通用版）
2019-03-03
React NativeAndroidMacWindows
React基礎知識
2018-06-03
React
react 知識梳理（一）
2018-03-08
React
React Native Icon方案：react-native-svg
2018-09-01
React NativeSVG
<react學習筆記(5)>知識點回顧(1)
2018-12-22
React筆記
React Native轉web方案：react-native-web
2018-08-19
React NativeWeb
React Native 使用 react-native-webview 渲染 HTML
2019-10-21
React NativeWebViewHTML