Chapter 08

入力部品、Radio

knaka Tech-Blog
knaka Tech-Blog
2021.11.22に更新
このチャプターの目次

概要

入力で、RadioButtonになります。


関連

https://callstack.github.io/react-native-paper/radio-button.html

構成

react-native-paper : 4.10.1


画面


  • コード
FormRadioScreen.tsx
import React, { useState } from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';
import { TextInput, Button, RadioButton  } from 'react-native-paper';

export class FormRadioScreen extends React.Component {
  state = {
    checked: 'shop1',
  };
  render() {
    const { checked } = this.state
console.log(checked);
    return (
      <View style={styles.container}>
        <RadioButton.Item
          value="shop1"
          label="店舗1"
          status={checked === 'shop1' ? 'checked' : 'unchecked'}
          onPress={() => { this.setState({ checked: 'shop1' }); }}
        />
        <RadioButton.Item
          value="shop2"
          label="店舗2"
          status={checked === 'shop2' ? 'checked' : 'unchecked'}
          onPress={() => { this.setState({ checked: 'shop2' }); }}
        />
      </View>
    )
  }
}
  
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  tinyLogo: {
    width: 50,
    height: 50,
  },
  logo: {
    width: 66,
    height: 58,
  },
  text_base: {
    fontSize: 24,
  },
  text_top: {
    color: '#00FF00',
    fontSize: 24,
    marginBottom: 8,
  }
});

....