利用React-Native实现的排序小工具

写作时间：2020/4/27
React-Native版本：0.62.2

界面是下面这样的，实现的功能就是当你输入一系列数字（用空格隔开）的时候，会自动对你所输入的内容进行排序，并进行显示。

具体的实现的代码如下，如果你想运行代码查看效果，只需新建一个RN工程，并将下面的代码替换原App.js中的代码即可。

// App.js
import React, {Component} from 'react';
import {View, Text, TextInput, StyleSheet} from 'react-native';

export default class App extends Component {
    constructor() {
        super();
        this.state = {
            input: '',
            output: '',
        };
    }

    _Foo = text => {
        this.setState({input: text});
        var arr = text.trim().split(' ');
        var l = arr.length;
        for (let i = 0; i < l; i++) {
            arr[i] = parseInt(arr[i], 10);
        }
        for (let i = l - 1; i > 0; i--) {
            for (let j = 0; j < i; j++) {
                if (arr[j] > arr[j + 1]) {
                    [arr[j], arr[j + 1]] = [arr[j + 1], arr[j]];
                }
            }
        }
        this.setState({output: arr.toString()});
    };

    render() {
        return (
            <View style={styles.container}>
                <TextInput
                    style={styles.top}
                    placeholder="Type here !"
                    onChangeText={value => {
                        this._Foo(value);
                    }}
                    value={this.state.input}
                />
                <View style={styles.bottom}>
                    <Text>{this.state.output}</Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: 'steelblue',
    },
    top: {
        height: 80,
        backgroundColor: 'powderblue',
        margin: 10,
    },
    bottom: {
        flex: 1,
        backgroundColor: 'skyblue',
        margin: 10,
    },
});

代码比较粗糙，输入不当也会产生诸多问题，极其无聊的一个作品，仅供娱乐