javascript - Create button group in React Native using react components - Stack Overflow

admin管理员组

文章数量:1391925

I am looking to see an example of button group something like in the example here.

ButtonGroup created using only React Native ponent like TouchableOpacity and Text etc...

I am looking to see an example of button group something like in the example here.

ButtonGroup created using only React Native ponent like TouchableOpacity and Text etc...

• javascript
• typescript
• react-native

Share Improve this question Follow edited May 13, 2021 at 1:59 Penny Liu 17.6k55 gold badges8686 silver badges108108 bronze badges asked Jun 28, 2020 at 10:54 Satish RaizadaSatish Raizada 9111 gold badge33 silver badges77 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Hope this is what you looking for

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;

It's nothing special just use useState and some dynamic styling rules.

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

The above link has self explanatory examples with detailed usage.

I suggest to go through them first.

You should go for a pre built set of ponent like react native paper which provide it for you.

Now, if you really don't want to (or can not), here is a Snack Expo demo (Not from me, found it on the web) showing something similar just with css, and here is the code :

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

Here is what it looks like :

ButtonGroup are just multiple buttons aligned, so it should be enough to fill your needs. You can set custom css of your own to style it as you wish, this is just.. 2 buttons aligned.

本文标签： javascriptCreate button group in React Native using react componentsStack Overflow