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

Z时代
2024-01-10
分类：综合

react

React Native 使用阿里 ant-design

实例效果如图：

一、安装

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

二、配置

编辑根目录下 .babelrc 增加红色区域显示代码

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

三、使用

性别选择实例：

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>
        )
    }
}

相册照片选择实例：

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,
    },
});