Есть ли способ отображения средней радио-кнопки, включенной при входе на экран?

Question

Есть ли способ отображения средней радиокнопки при включении при входе на экран? И даже когда я нажимаю ту же радиокнопку, она не выключится сама, но я смогу переключаться между ними, а не выключать их, когда нажимаю на них sh.

это мой пример:

import React, { useState } from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';
import { CheckBox } from 'react-native-elements';

    const SettingsScreen = props => {
    const [checked6, setChecked6] = useState(true);
    const [checked7, setChecked7] = useState(null);
    const [checked8, setChecked8] = useState(null);
    const handlePress = title => {
        checked6 === title ? setChecked6(null) : setChecked6(title)
        checked7 === title ? setChecked7(null) : setChecked7(title)
        checked8 === title ? setChecked8(null) : setChecked8(title)
}

          return (
                <CheckBox
                    iconLeft
                    checkedColor='green'
                    title='bomba6'
                    checkedIcon='dot-circle-o'
                    uncheckedIcon='circle-o'
                    checked={checked6 === 'bomba6'}
                    onPress={() => handlePress('bomba6')}
                />
                <CheckBox
                    iconLeft
                    checkedColor='green'
                    title='bomba7'
                    checkedIcon='dot-circle-o'
                    uncheckedIcon='circle-o'
                    checked={checked7 === 'bomba7'}
                    onPress={() => handlePress('bomba7')}
                />
                <CheckBox
                    iconLeft
                    checkedColor='green'
                    title='bomba8'
                    checkedIcon='dot-circle-o'
                    uncheckedIcon='circle-o'
                    checked={checked8 === 'bomba8'}
                    onPress={() => handlePress('bomba8)')}
                />
             );
          };

      export default SettingsScreen;

Answer 1

Прежде всего, прочитав ваше описание, я не думаю, что вам нужен флажок здесь. Было бы лучше, если вы используете переключатель. Проверьте библиотеку переключателей здесь .

Однако вы правильно используете хук useState.

Answer 2

используйте крючок useEffect для включения средней радиокнопки и используйте следующий код, чтобы он работал

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Platform } from 'react-native';
import { CheckBox } from 'react-native-elements';

const SettingsScreen = props => {
  const [checked6, setChecked6] = useState(null);
  const [checked7, setChecked7] = useState(null);
  const [checked8, setChecked8] = useState(null);
  const handlePress = title => {
    if (title === 'bomba6') {
      setChecked6(!checked6);

    } else if (title === 'bomba7') {
     setChecked7(!checked7);
    } else {
      setChecked8(!checked8);
    }
  }

  useEffect(() => {
    setChecked7(true)
  }, [])

  console.log(checked6)

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <CheckBox
        // iconLeft
        checkedColor='green'
        title='bomba6'
        checkedIcon='dot-circle-o'
        uncheckedIcon='circle-o'
        checked={checked6}
        onPress={() => handlePress('bomba6')}
      />
      <CheckBox
        iconLeft
        checkedColor='green'
        title='bomba7'
        checkedIcon='dot-circle-o'
        uncheckedIcon='circle-o'
        checked={checked7}
        onPress={() => handlePress('bomba7')}
      />
      <CheckBox
        iconLeft
        checkedColor='green'
        title='bomba8'
        checkedIcon='dot-circle-o'
        uncheckedIcon='circle-o'
        checked={checked8}
        onPress={() => handlePress('bomba8)')}
      />
    </View>
  );
};

export default SettingsScreen;