Блог

Я хочу передать заголовок компонента кнопки React Native в соседнюю функцию. Я использую функциональные компоненты React Native только для этого приложения.

Вот компонент. Я хотел бы передать заголовок кнопки, нажатой пользователем, который будет либо «английский», либо «арабский», в функцию submitLanguageSelection , чтобы затем я мог сохранить это значение в useLocalStorage() , пользовательский хук, который я написал для обработки AsyncStorage , так что в следующий раз, когда пользователь использует приложение, их выбор языка будет сохранен, и они не будут отображаться ChooseYourLanguageScreen снова.

Любая помощь приветствуется, спасибо.

 const ChooseYourLanguageScreen = ({ navigation }) => {
  const [saveData, storedValue, errorMessage] = useLocalStorage();
  const [userSelectedLanguage, setUserSelectedLanguage] = React.useState('');

  const submitLanguageSelection = () => {
    //TODO: receive params from onPress
    //TODO: save the data locally
    //TODO: navigate to welcome screen
  };

  return (
    <View style={styles.container}>
      {errorMessage ? <Text>{errorMessage}</Text> : null}
      <Text style={styles.text}>This is the Choose Your Language Screen</Text>
      <View style={styles.buttons}>
        <View>
          <Button
            title={'English'}
            onPress={() => submitLanguageSelection()}
          />
        </View>
        <View>
          <Button title={'Arabic'} onPress={() => submitLanguageSelection()} />
        </View>
      </View>
    </View>
  );
};
  

Вы можете просто передать его в функцию

  <Button title={'Arabic'} onPress={() => submitLanguageSelection('Arabic')} />
  

И получить доступ, как показано ниже

   const submitLanguageSelection = (language) => {
    console.log(language);
  };
  

Получение данных из родственного компонента является антишаблоном.

Источником знаний о языковых параметрах является ChooseYourLanguageScreen компонент (как видно из вашего фрагмента), поэтому он должен содержать список доступных языков. Имея это, вы можете просто перебирать их и отображать соответствующие компоненты:

 <View style={styles.buttons}>
  {languages.map((language) => (
    <View key={language}>
      <Button
        title={language}
        onPress={() => submitLanguageSelection(language)}
      />
    </View>
  ))}
</View>