React Native使用小结

[wulala]

路由

React Native 通过 React Navigation 组件控制页面的切换。

React Navigation 有三个比较重要的东西（因为我只用了这三个东西啊，摔），StackNavigator 和 TabNavigator 和 screenProps，其中

TabNavigator 类似底部栏，用来区分模块

TabNavigator(RouteConfigs, TabNavigatorConfig)

// 此组件为渲染底部栏图标
class TabItem extends Component {
    render() {
        return (
            <Image 
                source={ this.props.focused ? this.props.selectedIcon : this.props.defaultIcon } 
                style={ {tintColor: this.props.tintColor, width: 20, height: 20 } } 
            />
        )
    }
}

const TAB = TabNavigator(
    // RouteConfigs
    {
        Home: {
            screen: Home,
            navigationOptions: {  // 也可以写在组件的static navigationOptions = {} 内
                header: null,
                tabBarLabel: '首页',
                tabBarIcon: ({focused, tintColor}) => (
                    // 提供 focused， 从而获取当前底部栏选中与否情况
                    <TabItem 
                        tintColor={ tintColor }
                        focused={ focused }
                        defaultIcon={ require('../pic/h.png') }
                        selectedIcon={ require('../pic/ha.png') }
                    />
                ),
            },
        },
        User: {
            // ...
        }
    },
    // TabNavigatorConfig
    // https://reactnavigation.org/docs/navigators/tab#TabNavigatorConfig
    {
        tabBarPosition: 'bottom',
        iconStyle: {}, // 图标样式，间隙太大，通过margin负值重拉伸
        labelStyle: {}, // 文字样式
        // ...
    }
)

StackNavigator 用来跳转页面和传递参数

StackNavigator(RouteConfigs, StackNavigatorConfig)

const STACK = StackNavigator(
    // RouteConfigs
    https://reactnavigation.org/docs/navigators/stack#RouteConfigs
    {
        // 载入底部栏
        Home: {
            screen: TAB,
            navigationOptions: {
                // [header](https://reactnavigation.org/docs/intro/headers) 
                // APP常见的返回按钮跟标题以及右侧功能按钮(分享，购物车等)，没用，自己写的头部
                header: null
            }
        },
        // 其他页面
        Detail: {
            screen: Detail,
            navigationOptions: {
                header: null
            }
        }, 
        // 其他页面2...
    },
    // StackNavigatorConfig
    // https://reactnavigation.org/docs/navigators/stack#StackNavigatorConfig
    {
        mode: 'card', // 这里有个悬而未决的问题， 就是切换页面的模式问题
        // Andorid与IOS上效果永远都是 从下往上 显示页面，而不是APP更常见的左右滑动切换的效果... 
        // react-native 0.47.1, react-navigation 1.0.0-beta.11
    }
)

screenProps 用作换肤、语言切换等

稍候继续...

React Native 常用组件

... 意义重大的省略号，代表着你要会 react 的那一套东西

• 关于 Flatlist 首次进入会加载两次，个人猜测是首次会触发 触底事件 (不足一屏)
• 可通过 Platform 获取平台信息，好像文档没看到...
• 选择图片： react-native-image-crop-picker IOS下请严格按照Post-install steps方式添加
• 获取网络图片的宽高

// 这是一个异步操作哦
Image.getSize(uri, (w, h) => console.log(w, h, '图片宽高'))

• 图片轮播： react-native-swiper 要等数据回来了才能渲染此组件哦，要不小圆点不正常工作。

constructor(props) {
    this.swiperDATA = []
}
getPic() {
    fetch('xxx/xxxx').then(res => res.json()).then(data => {
        this.swiperDATA = data
    })
}
render() {
    return (
        {this.swiperDATA.length > 0 ? 
            <Swiper height = { 100 }></Swiper>
            : <View style = {{height: 100}}></View>
        }
    )
}

• 日期选择： react-native-datepicker
• 微信： react-native-wechat Android请选择手动Link，IOS确保添加到 URL Type
• 支付宝： react-native-yunpeng-alipay
• 富文本渲染： react-native-htmlview
• 提示框： react-native-root-toast
• WebView 可以通过 onMessage 实现网页与React Native 通信
• IOS下圆角属性需要是高度的一半值
• IOS下TextInput文本输入在IOS有没有确定的按钮问题

// 最粗暴的方式，搜狗下换行按钮可以触发提交事件
<TextInput  
    autoFocus 
    underlineColorAndroid={ 'transparent' } 
    onChangeText={(text) => this.setState({text})} 
    value={this.state.text} 
    onSubmitEditing={ (text) => this.search() } 
/> 

• IOS下正常情况下有 20 高度的顶部条，（也可以没有，xcode内禁用顶部条）
• IOS下富文本组件 react-native-htmlview 图片渲染部分不成功，最好的解决方案： 给 img 标签 添加 width, height 属性， 具体的原因请查看该组件文件。

状态管理

常见错误