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