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 
  > 
 

   } 
 