Question

单选按钮必须成对。如何将这四个单选按钮组合在一起？

Answer 1

嘿，金有成

您可以使用 react-native-radio-buttons-group 包来实现单选按钮组。

在这里看看：

import RadioGroup from 'react-native-radio-buttons-group';

export default class App extends Component {
    state = {
        data: [
            {
                label: 'Default value is same as label',
            },
            {
                label: 'Value is different',
                value: "I'm not same as label",
            },
            {
                label: 'Color',
                color: 'green',
            },
            {
                disabled: true,
                label: 'Disabled',
            },
            {
                label: 'Size',
                size: 32,
            },
        ],
    };

    // update state
    onPress = data => this.setState({ data });

    render() {
        let selectedButton = this.state.data.find(e => e.selected == true);
        selectedButton = selectedButton ? selectedButton.value : this.state.data[0].label;
        return (
            <View style={styles.container}>
                <Text style={styles.valueText}>
                    Value = {selectedButton}
                </Text>
                <RadioGroup radioButtons={this.state.data} onPress={this.onPress} />
            </View>
        );
    }
}

或者类似的东西

https://github.com/moschan/react-native-simple-radio-button

希望这对您有用：）

谢谢

Answer 2

如果要在没有任何第三方库的情况下进行操作，可以通过进行布局并在TouchableOpacity中使用单选按钮的图像（一个用于“选定”，一个用于未选定）来实现。您可以为按钮取一个变量，并为初始状态将它们设置为false。现在，一旦您对该特定单选按钮执行onPress，就可以将其设置为true。现在，您可以使用“图像源”属性渲染“选定的单选按钮”。这是我没有单选按钮的背景图像代码。我还评论了源道具，您可以取消注释并根据您的情况传递单选按钮的位置。

<View style={{height: 200, marginTop:50, width: 220, borderColor: '#000000', borderWidth: 2, alignSelf: 'center'}}>
                      <View style={{flexDirection:'row', marginTop: 30}} >
                          <View style={{flexDirection:'row-reverse', width: '50%', height: 50, alignItems: 'center'}}>
                            <Text style={{marginRight: 5}}>Apple</Text>
                            <TouchableOpacity
                             // onPress = {() => this.selectRadioBtn}
                            >
                              <Image style={{height: 24, width: 24, backgroundColor: 'steelblue', marginRight: 5}}
                              // source={require('your_asset_url_her')}
                            />
                            </TouchableOpacity>

                          </View>
                          <View style={{flexDirection:'row', width: '50%', height: 50, alignItems: 'center', marginLeft: 5}}>
                             <TouchableOpacity
                             // onPress = {() => this.selectRadioBtn}
                            >
                              <Image style={{height: 24, width: 24, backgroundColor: 'steelblue', marginRight: 5}}
                              // source={require('your_asset_url_her')}
                            />
                            </TouchableOpacity>
                            <Text style={{marginRight: 5}}>Apple</Text>

                          </View>
                      </View>
                      <View style={{flexDirection:'row'}} >
                          <View style={{flexDirection:'row-reverse', width: '50%', height: 50, alignItems: 'center'}}>
                            <Text style={{marginRight: 5}}>Apple</Text>
                             <TouchableOpacity
                             // onPress = {() => this.selectRadioBtn}
                            >
                              <Image style={{height: 24, width: 24, backgroundColor: 'steelblue', marginRight: 5}}
                              // source={require('your_asset_url_her')}
                            />
                            </TouchableOpacity>
                          </View>
                          <View style={{flexDirection:'row', width: '50%', height: 50, alignItems: 'center', marginLeft: 5}}>
                             <TouchableOpacity
                             // onPress = {() => this.selectRadioBtn}
                            >
                              <Image style={{height: 24, width: 24, backgroundColor: 'steelblue', marginRight: 5}}
                              // source={require('your_asset_url_her')}
                            />
                            </TouchableOpacity>
                            <Text style={{marginRight: 5}}>Apple</Text>

                          </View>
                      </View>

                      <TouchableOpacity style={{height: 30, alignSelf: 'center', marginTop: 10, borderColor: '#000000', borderWidth: 2, justifyContent: 'center', alignItems: 'center'}}>
                        <Text style={{width: 80, alignSelf: 'center', textAlign: 'center'}}>OK</Text>
                      </TouchableOpacity>

                    </View>

请让我知道是否需要任何澄清。谢谢：）

如何在本机反应中获得这种效果？

2 个答案: