web-dev-qa-db-ja.com

Native-Baseでラジオボタンが機能しない

Native-Baseを使用しています。ラジオボタンを使用する必要がありますが、機能しません。クリックしても何も起こりません。これがコードです。

import React, { Component } from 'react';
import { Container, Header, Content, ListItem, Text, Radio, Right } from 'native-base';
export default class RadioButtonExample extends Component {
  render() {
    return (
      <Container>
        <Header />
        <Content>
          <ListItem>
            <Text>Daily Stand Up</Text>
            <Right>
              <Radio selected={false} />
            </Right>
          </ListItem>
          <ListItem>
            <Text>Discussion with Client</Text>
            <Right>
              <Radio selected={true} />
            </Right>
          </ListItem>
        </Content>
      </Container>
    );
  }
}

どうすればそれを機能させることができますか？ラジオボタン機能のみを含む別のライブラリを送信しないでください。私はすでにさまざまなラジオボタンライブラリをチェックしました。それを機能させるために、このコードに何かを追加する必要があります。

react-nativereact-native-androidreact-native-iosnative-base
6
Syuzanna

TouchableOpacity の代わりにonPressを追加できます。これは、小道具を受け入れます。

import React, { Component } from 'react';
import { Container, Header, Content, ListItem, Text, Radio, Right } from 'native-base';
export default class RadioButtonExample extends Component {
constructor() {
  super();
  this.state = {
   itemSelected: 'itemOne',
 }
}
render() {
 return (
    <Container>
      <Header />
      <Content>
        <ListItem>
          <Text>Daily Stand Up</Text>
          <Right>
            <Radio onPress={() => this.setState({ itemSelected: 'itemOne' })}
              selected={this.state.itemSelected == 'itemOne'}
            />
          </Right>
        </ListItem>
        <ListItem>
          <Text>Discussion with Client</Text>
          <Right>
            <Radio onPress={() => this.setState({ itemSelected: 'itemTwo' })}
                  selected={this.state.itemSelected == 'itemTwo' }
                />
          </Right>
        </ListItem>
      </Content>
    </Container>
   );
  }
}
11
Mohamed Khalil

最も簡単で簡単な方法は、最初にラジオアイテムの配列を作成することです。

const radioItem = [
    { label: 'Female', value: 'female' },
    { label: 'Male', value: 'male' }
];

次に、コンテンツ内でこのようにします。

<Content>
   <Text>Select your choice</Text>
   {
     radioItem.map((data, key) => {
         return (
                  <ListItem key={key}>

                     <Left>
                         <Text>{data.label}</Text>
                     </Left>
                     <Right>
                         <Radio
                            onPress={()=> this.setState({radioValue:data.value})}
                            color={"gray"}
                            selectedColor={"gray"}
                            selected={data.value === this.state.radioValue}
                          />
                     </Right>
                  </ListItem>
                 )
       })
   }
</Content>

これを理解しましょう：

まず、ネイティブベースの無線コンポーネントについて理解する必要があります。これは、選択した小道具を使用してブール値trueまたはfalseをチェックし、それに応じてアクティブな無線を表示します。

そのため、onPressアクションを使用して現在の値を取得し、それを状態に保存しています。選択した小道具は値と一致し、trueまたはfalseを返します。したがって、状態値がないため、デフォルトでは両方の無線アイテムの値がfalseになることがわかります。

コンストラクター内で状態値を定義することにより、デフォルトで選択された無線を設定することもできます

5
amitsin6h

RadioGroupをredux-formに適合させました。これは、水平ラジオレイアウトのコードです。

import React from 'react';
import { Radio, View, Text, Label } from 'native-base';
import { StyleSheet } from 'react-native';
import PropTypes from 'prop-types';
import { Field } from 'redux-form';
import { required } from './validaciones';

const RadioGroup = ({ label, name, options }) => (
  <View style={styles.container}>
    {!!label && <Label>{label}</Label>}
    <View style={styles.radioContainar}>
      <Field
        validate={[required]}
        component={({ input, options }) => options.map(option => (
          <View key={option.id} style={styles.radio}>
            <Radio
              id={option.id}
              type="radio"
              {...input}
              value={option.value}
              onPress={() => input.onChange(option.value)}
              selected={option.value === input.value}
            />
            <Text onPress={() => input.onChange(option.value)} style={styles.label}>
              {option.label}
            </Text>
          </View>
        ))
        }
        name={name}
        options={options}
      />
    </View>
  </View>
);

RadioGroup.propTypes = {
  options: PropTypes.arrayOf(
    PropTypes.shape({
      id: PropTypes.string.isRequired,
      label: PropTypes.string.isRequired,
      value: PropTypes.string.isRequired
    })
  ),
  label: PropTypes.string,
  name: PropTypes.string.isRequired
};

const styles = StyleSheet.create({
  container: {
    marginTop: 14,
    marginBottom: 7
  },
  radioContainar: {
    marginTop: 7,
    flexDirection: 'row',
    alignSelf: 'flex-start'
  },
  label: {
    marginLeft: 3
  },
  radio: {
    marginRight: 14,
    flexDirection: 'row',
    alignSelf: 'flex-start'
  }
});

export default RadioGroup;

使用法：

<RadioGroup
  label="Sexo"
  name="sexo"
  options={[
    {
      id: 'gender-male',
      label: 'Hombre',
      value: 'HOMBRE'
    },
    {
      id: 'gender-female',
      label: 'Mujer',
      value: 'MUJER'
    }
  ]}
/>
0
Hans Poo

onPressプロパティはListItemノードにある必要があります。私はこれを行うことによってそれを機能させることができました：

                <ListItem
                    selected={this.state.registerForm.type == 'item1'}
                    onPress={() => this._handleRegisterFormChanges('item1', 'type')}
                >
                    <Left>
                        <View style={{ flexDirection: 'column' }}>
                            <Text style={{ alignSelf: 'flex-start' }}>Radio text 1</Text>
                        </View>
                    </Left>
                    <Right>
                        <Radio
                            selected={this.state.registerForm.type == 'item1'}
                            color={Colors.tintColor}
                            selectedColor={Colors.tintColor}
                        />
                    </Right>
                </ListItem>
                <ListItem
                    selected={this.state.registerForm.type == 'item2'}
                    onPress={() => this._handleRegisterFormChanges('item2', 'type')}
                >
                    <Left>
                        <View >
                            <Text style={{ alignSelf: 'flex-start' }}>Radio text 2</Text>
                        </View>
                    </Left>
                    <Right>
                        <Radio
                            selected={this.state.registerForm.type == 'item2'}
                            color={Colors.tintColor}
                            selectedColor={Colors.tintColor}
                        />
                    </Right>
                </ListItem>
0
Antoine S