Thêm Khả năng Tùy chỉnh và Hiển thị Giao diện Xem Bánh Xe Thích ứng vào Ứng dụng React Native Của Bạn

VUI LÒNG LƯU Ý, DỰ ÁN NÀY KHÔNG CÒN ĐƯỢC BẢO TRÌ NỮA

react-native-wheel

Combination use

PropTypes

• values Dữ liệu nguồn (hỗ trợ String int double boolean)
• isLoop Có lặp vô tận hay không
• textSize Kích thước phông chữ
• selectedIndex Chỉ mục mặc định đã chọn
• velocityFling Tốc độ cuộn, đề xuất 15-25
• onItemChange Gọi lại khi cuộn

Cài Đặt Và Sử Dụng

Cài đặt qua Npm

$ npm install --save react-native-wheel

Cập nhật Cài đặt Gradle

// file: android/settings.gradle
...
include ':react-native-wheel'
project(':react-native-wheel').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-wheel/android')

Cập nhật Cài đặt Gradle cho ứng dụng

// file: android/app/build.gradle
...

dependencies {
  ...
  compile project(':react-native-wheel')
}

Đăng ký Gói React

// file: android/src/main/java/com.xx/MainApplication.java
...

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
        protected boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

        @Override
        protected List<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                new MainReactPackage(),
                new WheelPackage()          // Added there
            );
        }
    };

Sử dụng

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ToastAndroid
} from 'react-native';

import WheelView from 'react-native-wheel';

import Dimensions from 'Dimensions';

let SCREEN_WIDTH = Dimensions.get('window').width;
let SCREEN_HEIGHT = Dimensions.get('window').height;


let wheelData = [1,'two',false,0.10,'six','seven','eight','nine','ten'];

let currentIndex;

class AwesomeProject extends Component {
  ok(){
    ToastAndroid.show('select index : ' + currentIndex +' select item : ' + wheelData[currentIndex] ,ToastAndroid.SHORT);
  }
  _onItemChange(index){
    currentIndex = index;
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.ok} onPress={this.ok.bind(this)} >
          确定
        </Text>
        <WheelView
          style={styles.wheelview}
          onItemChange={this._onItemChange.bind(this)}
          values={wheelData}
          isLoop={false}
          selectedIndex={0}
          textSize={20}
          velocityFling={20}
        />
      </View>
    );
  }
};

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-end',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  ok: {
    margin: 5,
    color: '#000000',
    fontSize: 18,
  },
  wheelview: {
    width: SCREEN_WIDTH,
    height: SCREEN_HEIGHT/5*2,
  },
});

AppRegistry.registerComponent('AwesomeProject', () => AwesomeProject);

Chạy Hiển thị

Tham Khảo

https://github.com/weidongjian/androidWheelView

Chi tiết Tải xuống:

Tác giả: shexiaoheng
Mã nguồn: https://github.com/shexiaoheng/react-native-wheel