react native定報預披項目知識點總結

1.TextInput組件對安卓的適配問題

textInput 在iOS 顯示正常，可是在android下會出現下橫線，而且字會被遮蓋 

所以通常都這麼用該組件

<TextInput style={{paddingVertical:0}} underlineColorAndroid="transparent" />

 

2.關於樣式

附react native可以使用的樣式屬性：

https://github.com/doyoe/react-native-stylesheet-guide

https://github.com/vitalets/react-native-extended-stylesheet

react native的樣式不存在繼承的狀況，因此基本上每一個節點都要寫style 

Text 組件 文字必須放在Text元素裏邊，Text元素能夠相互嵌套，且存在樣式繼承關係，被嵌套的Text 設置的間距是無效的。默認狀況下，文本被按下時會有一個灰色的陰影，若是想取消就 把 屬性 suppressHighlighting 設置爲 true ，

<Text suppressHighlighting={true} ></Text>

 

設置border屬性只能在View上，不能在Text上 ，自測了下，安卓下寫在Text是生效的，可是在ios下不生效。

 

3.IOS平臺下請求接口報錯

IOS - fetch request from ios simulator fails

參考連接：https://github.com/facebook/react-native/issues/4415

This is probably caused because the latest iOS SDK enforces connections to be under https protocol, instead of plain http.
You can add an exception to your domain in the info.plist file of the Xcode project. something like this should work:

解決辦法：找到 Info.plist文件，

修改成

<key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>myDomain.com</key>
            <dict>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
              ...other exceptions like localhost...
     </dict>
</dict>

把請求的接口 域名 加到key上 就好啦。

 

4.關於setState

當咱們調用 setState 的時候，React.js 並不會立刻修改 state。而是把這個對象放到一個更新隊列裏面，稍後纔會從隊列當中把新的狀態提取出來合併到 state 當中，而後再觸發組件更新。

也就是說：setState方法是異步的，若是給一個state變量量賦值後，立刻獲取改變後的值，有多是不正確的。

詳細講解參考：http://huziketang.mangojuice.top/books/react/lesson10

 

如今有這樣的需求

 

點擊 「已披露」 和「未披露」改變參數值，handePilouChange(0) , handePilouChange(1) 

handePilouChange(tag) {
    if (tag == this.state.pilouActive) {
      return
    }
    this.state.pilouActive = tag
    this.state.PAGENUM = 1
    this.setState({
      pilouActive: tag,
      PAGENUM: 1,
      hasMore: false
    })
    this.getData()
}

當咱們在調用 this.getData()  函數時，須要拿到最新的state值，若是單純的使用  this.setState({pilouActive: tag}) 在 getData函數中咱們發現 當前的state仍是以前的state的值，沒有當即改變，此時的作法是 

this.state.pilouActive = tag

 

5.關於路由切換

在 React Native 中，官方已經推薦使用 react-navigation 來實現各個界面的跳轉和不一樣板塊的切換

相關連接：

導航路由跳轉：https://reactnavigation.org/docs/zh-Hans/getting-started.html

路由跳轉切換方式：http://www.javashuo.com/article/p-ushaiqza-kd.html

這裏着重說下 StackNavigator 導航組件

基本使用案例：

import { createStackNavigator } from 'react-navigation'

const MainStack = createStackNavigator(
  {
    Home: {
      screen: IndexPage
    },
    Details: {
      screen: DetailPage
    },
  },
  {
    initialRouteName: 'Home',
    headerMode: 'none',
    transitionConfig: () => ({
      transitionSpec: {
        duration: 350,
        easing: Easing.out(Easing.poly(4)),
        timing: Animated.timing,
      },
      screenInterpolator: sceneProps => {
        const { layout, position, scene } = sceneProps
        const { index } = scene
        const width = layout.initWidth
        const translateX = position.interpolate({
          inputRange: [index - 1, index, index + 1],
          outputRange: [width, 0, 0]
        })
        const opacity = position.interpolate({
          inputRange: [index - 1, index - 0.99, index],
          outputRange: [0, 1, 1]
        })
        return { opacity, transform: [{ translateX }] }
      },
    })
  }
);

export default class rootApp  extends Component{
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <MainStack />
    )
  }
};

須要注意的是 transitionConfig（配置頁面跳轉的動畫，覆蓋默認的動畫效果）

內置的跳轉動畫在 react-navigation/src/views/CardStack/CardStackStyleInterpolator中，共三種。forHorizontal:從右向左進入、forVertical:從下向上進入、forFadeFromBottomAndroid:從底部淡出。

在安卓上運行時，默認的跳轉動畫效果是 forFadeFromBottomAndroid 。可是這種切換效果和傳統的切換效果不同，這時候咱們能夠自定義切換效果。

參考文章：https://github.com/react-navigation/react-navigation/pull/1187#issuecomment-300112470

 

 

react-navigation 監聽頁面顯隱   https://reactnavigation.org/docs/en/navigation-prop.html