React-Native android 开发者记录

时间 2019-12-09

标签 react native android 开发者记录栏目 React 繁體版

原文原文链接

1.安装html

安装步骤很少废话,按照官网步骤执行便可node

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

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: android

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

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

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

2. React Navigationapp

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

这里我要提醒你们，不管你是安装了一个什么小插件或是更新了什么包，安装完以后必定要卸载原有的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 
  > 
 

   } 
 