[RN] React Native 使用阿里 ant-design

時間 2019-11-12

標籤 react native 使用阿里 ant design 欄目 React 简体版

原文原文鏈接

React Native 使用阿里 ant-designhtml

實例效果如圖：react

1、安裝git

npm install antd-mobile-rn --save
npm install babel-plugin-import --save-dev

2、配置github

編輯根目錄下 .babelrc 增長紅色區域顯示代碼npm

{
  "presets": [
    "module:metro-react-native-babel-preset"
  ], "plugins": [
    [
      "import",
      {
        "libraryName": "antd-mobile-rn" } ] ]
}

3、使用react-native

性別選擇實例：babel

import React from 'react';
import {View} from 'react-native';
import {List, InputItem, Picker} from 'antd-mobile-rn';

export default class TestPicker extends React.Component {
    constructor(props) {
        super(props)
        this.state = {gender: '女'}
        this.pickerData = [{label: '男', value: '男'}, {label: '女', value: '女'}]
    }

    render() {
        return (
            <View>
                <Picker data={this.pickerData} cols={1} value={Array.from(this.state.gender)} onChange={(v) => {
                    this.setState({gender: v})
                }}>
                    <List.Item arrow="horizontal">性別</List.Item>
                </Picker>
            </View>
        )
    }
}

相冊照片選擇實例：antd

import React, {Component} from "react";
import {View, ScrollView, Image, TouchableOpacity, Alert, Text, StyleSheet} from 'react-native';
import {List, ActionSheet, Button, WhiteSpace, WingBlank, Modal, Toast} from 'antd-mobile-rn';

export default class TestActionSheet extends Component {

    constructor(props) {
        super(props);
        this.state = {
            types: [],
        }
        this.navigation = props.navigation;
    }

    _check() {
        const BUTTONS = ['拍照', '從相冊選擇', '取消'];
        ActionSheet.showActionSheetWithOptions({
            options: BUTTONS,
            cancelButtonIndex: 2,
        }, (buttonIndex) => {
            if (buttonIndex === 0) {
                alert('第一個菜單');
            } else if (buttonIndex === 1) {
                alert('第二個菜單');
            }
        });

    }


    render() {
        return (
            <View style={styles.container}>

                <TouchableOpacity activeOpacity={0.8}
                                  onPress={() => this._check()}>
                    <Text style={styles.instructions}>彈窗</Text>
                </TouchableOpacity>

            </View>
        );
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
    },
});