React(native)学习笔记

一个格式不错的JSON请求地址： https://raw.githubusercontent.com/facebook/react-native/master/docs/MoviesExample.json

小demo地址:https://github.com/koreadragon/react-native-demos

1.组件已弃用。

例如下图中的报错

Navigator is deprecated
Navigator is deprecated，说明此组件已废弃，不过可以在react-native-deprecated-custom-components这个库中找到。
首先cd 到你的工程目录，然后npm install react-native-deprecated-custom-components --save,然后在需要使用的页面这样导入import {Navigator} from 'react-native-deprecated-custom-components'

2.flex布局

在组件的style中指定flexDirection可以决定布局的主轴。然后子元素沿着主轴排列，默认值是竖直轴(column)方向。
注意子元素排列出的效果，初学者很容易搞反，例如flexDirection:row,那么子元素排列出的效果就是这样:

flexDirection:row

flexDirection:column,效果如下:

flexDirection:column

我个人喜欢把flex布局叫糖葫芦布局：把子组件看成一个个山楂，确定好他们的排列效果后，flexDirection就是主轴，很容易理解。
注意：使用alignItems时子元素在次轴方向不能有固定的尺寸

3.DatePickerIOS不显示的问题

当父视图中alignItems属性为center时，会造成DatePickerIOS真机上无法显示，模拟器可以显示。
这是facebook一个bug，issue地址:https://github.com/facebook/react-native/issues/8730

4.css导入不成功

一般情况下导入css文件后，比如import './test.css',在使用时className='button',如果想把css样式当做对象使用，需要在webpack.config.js中配置一下，

module:{
        rules:[
            {
                test:/(\.jsx|\.js)$/,
                use:{
                    loader:"babel-loader"
                },
                exclude:/node_modules/
            },
            {
                test:/\.css$/,
                use:[
                    {
                        loader: "style-loader"
                    },
                    {
                        loader: "css-loader",
                        options: {
                            modules:false//重要是这句，modules值为true，就可以把样式当做对象使用
                        }
                    }
                ]
            }
        ]
    },