ボタングループをラジオボタンのように見える

Question

添付画像に似た何かをする便利な方法はありますか？ ボタングループを1つの選択肢にする必要があり、クリックするとフォーカスが当てられます。

Answer 1

私はあなたに簡単な答えを与えるつもりです、それは意図した結果のようには見えませんが、それはCSSの微調整のカップルとなります。

Optionのコンポーネントを作成し、optionsのリストと選択したオプションを返す関数を受け入れるコンポーネントを作成します。

<Option 
    options={['A', 'B', 'C', 'D']} 
    onChange={(option) => { 
    console.log(option); 
    }} 
/> 

今すぐあなたのOption部品の内側に、あなたはこのコードは、今厄介であるので

class Option extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     activeOption: this.props.options[0], 
    }; 
    } 
    updateActiveOption = (activeOption) => { 
    this.setState({ 
     activeOption, 
    }); 
    }; 
    render() { 
    return (
     <View 
     style={{ 
      justifyContent: 'center', 
      flexDirection: 'row', 
      flexWrap: 'wrap', 
      marginTop: 100, 
      marginBottom: 100, 
     }} 
     > 
     {this.props.options.map((option, index) => (
      <TouchableOpacity 
      onPress={() => { 
       this.props.onChange(option); 
       this.updateActiveOption(option); 
      }} 
      > 
      <Text 
       style={{ 
       width: 150, 
       borderWidth: 1, 
       height: 50, 
       color: this.state.activeOption === option ? 'red' : 'black', 
       }} 
      > 
       {option} 
      </Text> 
      </TouchableOpacity> 
     ))} 
     </View> 
    ); 
    } 
} 

のようなコンポーネントを作成することができますし、StyleSheetオブジェクトとそれをneatenことができます。ここで

はそれが今どのように見えるかです：