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

路由跳转切换方式：https://www.cnblogs.com/CrazyWL/p/7283600.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