学RN的知识点记录（持续更新，日积月累）

RN获取屏幕高度和宽度等信息

import {Dimensions} from 'react-native';
// device width
const {width,height} = Dimensions.get ('window');

解决react-redux的connect嵌套问题

yarn add @babel/plugin-proposal-decorators

在babel设置文件里加入

plugins: [
    ['@babel/plugin-proposal-decorators', {legacy: true}],
  ],

使用@connect写法来连接组件管理store

@connect (
  state => ({user: state.userReducer}),
  dispatch => ({actions: bindActionCreators ({addAccessToken}, dispatch)})
)
export default class User extends Component{
  render(){
    return <Text>{this.props.user}</Text>;
 }
}

Fetch的使用

fetch (url, {
    headers: {
      'content-type': 'application/json',
      Authorization: 'Bearer ' + accessToken,
    },
  })
    .then (response => response.json ())
    .then (res => JSON.parse (res))
    .catch (err => console.log ('wran:' + err));

个人感觉有些应该算是es6的知识点

react-navigation的使用

import {createStackNavigator, createAppContainer} from 'react-navigation';

const AppNavigator = createStackNavigator (
  {
    Home: TabBarView,
    Product: Product,
    Login: Login,
  },
  {
    mode: 'modal',
    initialRouteName: 'Login',
    defaultNavigationOptions: {
      // header: null,
      headerStyle: {
        backgroundColor: '#ff5000',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  }
);
const AppContainer = createAppContainer (AppNavigator);

export default AppContainer;

下拉刷新的实现

<ScrollView
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh}
          />
        }
      />

实现下拉刷新和上拉加载的功能

<FlatList
          data={userList}
          keyExtractor={item => item._id}
          renderItem={({item}) => <UserCard key={item._id} item={item} />}
          refreshControl={
            <RefreshControl
              refreshing={refreshing}
              onRefresh={this._onRefresh}
              colors={['#000', '#ff6400', '#999']}
            />
          }
          onEndReachedThreshold={0.1}
          onEndReached={() => this._getNextPages ()}
        />

1

发现还是喜欢vue多一点😅