React-Native android 开发者记录

1.安装

 安装步骤不多废话,按照官网步骤执行即可

安装完之后，react-native run-android发现报错,页面出不来

Error: Unable to resolve module `./index` from `E:\react\RN_datacenter\node_modules\react-native\scripts/.`: The module `./index` could not be found from `E:\react\RN_datacenter\node_modules\react-native\scripts/.`. Indeed, none of these files exist: 

查看了网上的一些方法发现，这可能是 react-native 版本所致，解决方法：

关闭弹出错误的那个窗口，在第一个cmd窗口中执行 npm start 或是 yarn start 

当出现Loading dependency graph, done.字眼时，double R 或是reload 页面，这样就ok了

 

2. React Navigation

这个是巨坑，我是先写好了登录页面，再着手写导航器的，按照官网的步骤，写好了，总是报错,

这里我要提醒大家， 无论你是安装了一个什么小插件或是更新了什么包，安装完之后一定要卸载原有的app，重新加载安装，否则新的包无法生效

 还有就是，新手一般会去看React Navigation的一些其他的教程，比如StackNavigator 之类的都是React Navigation 3.0之前的版本，3.0之后，

全部变成了createStackNavigator, createAppContainer 等方法，请参考官网 

2.1  如果想要使用单独组件下面的  static navigationOptions = {}属性配置头部，就必须在使用createStackNavigator方法声明一遍，

const HomeStack = createStackNavigator({

Home: { screen: Home },

});

2.2  如果希望在特定的页面隐藏底部tab条，请使用navigationOptions

HomeStack.navigationOptions = ({ navigation }) => {

let tabBarVisible = true;

if (navigation.state.index > 0) {

tabBarVisible = false;

}

return {

tabBarVisible,

};

};

 2.3 如果希望头部标题居中显示，请使用headerTitleStyle属性，并设置{flex:1,textAlign:'center'}

static navigationOptions = {

title: '首页',

headerTintColor: '#fff',

headerTitleStyle: {

fontWeight: 'bold',

flex:1,

textAlign: 'center'

},

};

 

3.菜单手风琴效果及性能问题

我使用的是 antd-mobile-rn的UI框架，做好的手风琴菜单由于没有展开的动画，显得十分的生硬和呆板，感觉会有卡顿感觉

既然没有动画，我们就加入一些组件动画就ok了，

于是装上了 react-native-animatable, 用法参见官网,文档末尾有展示各种基本的动效，十分管用

简单的用法：

renderItem=(item,isActive)=>{

return <Animatable.View

duration={500}

easing="ease-out"

animation={isActive ? 'fadeInDown' : null}

>

<List style={styles.list}>

{item.map((it)=>{

return <List.Item key={it.id} onPress={()=>this.toList(it.id,it.title)}>

<Text style={styles.listText}>{it.title}</Text>

<FontAwesome name={'angle-right'} style={styles.FontAwesome} />

</List.Item>

})}

</List>

</Animatable.View>

}