Как отобразить значение переключателя в React Native?

Question

Я новичок в разработке React Native и мобильных приложений в целом. Я пытаюсь отобразить значение, назначенное для разных переключателей в группе переключателей, однако, похоже, что-то не так. Вот код ниже:

RadioButtons.js

    import React from 'react';
    import { FontAwesome, Ionicons, MaterialCommunityIcons,
    MaterialIcons, Feather } from '@expo/vector-icons';

    export const DeliveryModes = [{
      label: <Ionicons name='ios-walk' size={20} />,
      value: '30'
    }, {
      label: <MaterialCommunityIcons name='bike' size={20} />,
      value: '50'
    }, {
      label: <MaterialCommunityIcons name='motorbike' size={20} />,
      value: '190'
    }, {
      label: <MaterialCommunityIcons name='car-sports' size={20} />,
      value: '50'
    }, {
      label: <MaterialCommunityIcons name='car-pickup' size={20} />,
      value: '50'
    }, {
      label: <MaterialCommunityIcons name='car-estate' size={20} />,
      value: '50'
    }, {
      label: <MaterialCommunityIcons name='bus-side' size={20} />,
      value: '50'
    }, {
      label: <Feather name='truck' size={20} />,
      value: '50'
    },
    ];

index.js

    import React, { Component } from 'react';
    import { View, StyleSheet, Text, TouchableHighlight, } from 'react-native';
    import RadioGroup from 'react-native-custom-radio-group';
    import Tabs from './tabs';
    import { DeliveryModes } from './deliveryMode.js';

    class Details extends Component {
      constructor(props) {
        super(props);
        // Initialize State
        this.state = {
          // First tab is active by default
          activeTab: 0,
        };
      }


      render({ children } = this.props) {
        const {
         onBook
       } = this.props;
        return (
          <View style={styles.Container}>
          <Tabs>
            {/* First tab */}
            <View title="Delivery Mode" style={styles.content}>
            {/* Showtimes */}
             <View>
               {/* Day */}
               <Text style={styles.sectionHeader}>Kindly select desired mode of delivery.</Text>
               <RadioGroup
               radioGroupList={DeliveryModes}
               containerStyle={{ flexWrap: 'wrap', padding: 5, }}
               buttonContainerStyle={{ borderWidth: 0, margin: 5, borderRadius: 40, width: 90, }}
               onChange={(value) => this.deliveryMode(value)}
               ref={e => this.RadioGroup = e}
               />
               </View>
            </View>
            {/* Second tab */}
            <View title="Number & Weight" style={styles.content}>
              <Text style={styles.header}>
                Truly Native
              </Text>
              <Text style={styles.text}>
                Components you define will end up rendering as native platform widgets
              </Text>
            </View>
            {/* Third tab */}
            <View title="Parcel Category" style={styles.content}>
              <Text style={styles.header}>
                Ease of Learning
              </Text>
              <Text style={styles.text}>
                It’s much easier to read and write comparing to native platform’s code
              </Text>
            </View>

            </Tabs>
            {/* Footer */}
            <View style={styles.footer}>
              <TouchableHighlight
                underlayColor="#9575CD"
                style={styles.buttonContainer}
                onPress={onBook}
              >
                <Text style={styles.button}>Next</Text>
              </TouchableHighlight>
              <Text>{value}</Text>
            </View>
          </View>
        );
      }
    }


    const styles = StyleSheet.create({
      Container: {
        backgroundColor: '#FFF',
        height: 250,
        width: '100%',
        position: 'absolute',
        bottom: 0,
        shadowColor: '#000',
        shadowOffset: { x: 0, y: 0 },
        shadowOpacity: 0.2,
        elevation: 2,
        zIndex: 9999,
        flex: 1,
      },
      // Tab content container
    content: {
      flex: 1,                            
      justifyContent: 'center',           
      alignItems: 'center',               
      backgroundColor: '#F8F8F8',         
    },
    // Content header
    header: {
      margin: 10,                         // Add margin
      color: '#34495E',                   // White color
      fontFamily: 'Avenir',               // Change font family
      fontSize: 26,                       // Bigger font size
    },
    // Content text
    text: {
      marginHorizontal: 20,               // Add horizontal margin
      color: '#34495E',                    // Semi-transparent text
      textAlign: 'center',                
      fontFamily: 'Avenir',
      fontSize: 18,
    },
    sectionHeader: {
      paddingTop: 10,
      paddingLeft: 10,
      color: '#34495E',
      fontFamily: 'Avenir',
      fontSize: 15,
    },
      footer: {
        paddingHorizontal: 110,
        paddingVertical: 10,
        backgroundColor: '#FFF'
      },
      buttonContainer: {
        backgroundColor: '#2FCC71',
        borderRadius: 100,
        paddingVertical: 15,
        paddingHorizontal: 15,
        alignItems: 'center',
      },
      button: {
        color: '#FFFFFF',
        fontSize: 16,
        fontFamily: 'Avenir',
        fontWeight: 'bold',
      },
    });

    export default Details;

Я хочу иметь возможность передавать значение каждой радиокнопки в текстовый тег под следующей кнопкой. Я сохранил код простым и понятным для лучшего использования свойства onChange.

Answer 1

Вы не добавили свое "значение" в setState Сначала добавьте значение в setState

this.state = {
      // First tab is active by default
      activeTab: 0,
      value:''
    };

изменить значение на this.state.value

<Text>{this.state.value}</Text>

Вызов метода setState для onChange

onChange={(value) => this.setState({value:value})}

Надеюсь, это поможет вам ура!