使用 React 组件在 React Native 中创建按钮组答案

【问题标题】：Create button group in React Native using react components使用 React 组件在 React Native 中创建按钮组
【发布时间】：2020-06-28 10:54:52
【问题描述】：

我希望看到类似here 示例中的按钮组示例。

ButtonGroup 仅使用 React Native 组件创建，例如 TouchableOpacity 和 Text 等...

【问题讨论】：

标签： javascript typescript react-native

【解决方案1】：

希望这就是你要找的东西

import React, { useState } from 'react';
import { SafeAreaView, View, Text, TouchableOpacity, StyleSheet } from 'react-native';

const BtnGroup = () => {

    const [selection, setSelection] = useState(1);

    return (
        <SafeAreaView style={styles.container}>
            <View style={styles.btnGroup}>
                <TouchableOpacity style={[styles.btn, selection === 1 ? { backgroundColor: "#6B7280" } : null]} onPress={() => setSelection(1)}>
                    <Text style={[styles.btnText, selection === 1 ? { color: "white" } : null]}>Button 1</Text>
                </TouchableOpacity>
                <TouchableOpacity style={[styles.btn, selection === 2 ? { backgroundColor: "#6B7280" } : null]} onPress={() => setSelection(2)}>
                    <Text style={[styles.btnText, selection === 2 ? { color: "white" } : null]}>Button 2</Text>
                </TouchableOpacity>
                <TouchableOpacity style={[styles.btn, selection === 3 ? { backgroundColor: "#6B7280" } : null]} onPress={() => setSelection(3)}>
                    <Text style={[styles.btnText, selection === 3 ? { color: "white" } : null]}>Button 3</Text>
                </TouchableOpacity>
                <TouchableOpacity style={[styles.btn, selection === 4 ? { backgroundColor: "#6B7280" } : null]} onPress={() => setSelection(4)}>
                    <Text style={[styles.btnText, selection === 4 ? { color: "white" } : null]}>Button 4</Text>
                </TouchableOpacity>
            </View>
            
        </SafeAreaView >
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    btnGroup: {
        flexDirection: 'row',
        alignItems: "center",
        borderBottomWidth: 1,
        borderBottomColor: '#6B7280'
    },
    btn: {
        flex: 1,
        borderRightWidth: 0.25,
        borderLeftWidth: 0.25,
        borderColor: '#6B7280'
    },
    btnText: {
        textAlign: 'center',
        paddingVertical: 16,
        fontSize: 14
    }
});

module.exports = BtnGroup;

使用 useState 和一些动态样式规则没什么特别的。

【讨论】：

【解决方案2】：

https://react-native-elements.github.io/react-native-elements/docs/button_group.html

上面的链接有自我解释的例子和详细的用法。

我建议先通过它们。

【讨论】：

【解决方案3】：

您应该选择一组预先构建的组件，例如为您提供的 react native paper。

现在，如果你真的不想（或不能），here is a Snack Expo demo（不是我的，是在网上找到的）仅使用 css 显示类似的内容，这里是代码：

import React, { Component } from 'react';
import { Button, View, StyleSheet } from 'react-native';

export default class GridView extends Component {

   render() {
        return (
            <View style={styles.container}>
              <View style={styles.buttonContainer}>
                <Button title="Button 1"/>
              </View>
              <View style={styles.buttonContainer}>
                <Button title="Button 2"/>
              </View>
            </View>
        );
    }
}



const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
    },
    buttonContainer: {
        flex: 1,
    }
});

这是它的样子：

ButtonGroup 只是多个对齐的按钮，因此应该足以满足您的需求。您可以设置自己的自定义 css 以根据需要设置样式，这只是.. 2 个对齐的按钮。

【讨论】：