Как добавить звездочку к компоненту оповещения в React Native?

#ios #react-native #alert #rating

#iOS #react-native #предупреждение #Оценка

Вопрос:

Я пытаюсь добавить компонент звездного рейтинга в оповещение, используя «AirbnbRating» из «react-native-ratings» и «Alerts» «react-native», но у меня возникают проблемы с их объединением. Они отлично работают независимо, но не выяснили, как добавить что-либо, кроме текста, в функцию оповещения.

Возможно, стоит отметить, что я использую формат «функция» вместо формата «класс».

Кто-нибудь может предложить некоторое представление? Заранее благодарю!

Редактировать:

 const checkComplete = () => {

  if (!complete.trim()){

      return;
  }

  Alert.alert(

    "Checking hunger.",

    "Are you hungry?",

    [

      {

        text: "Yes",

        onPress: () => Alert.alert(

           'Express hunger',

           'Please express your hunger',

           [        

              {

                 text: 'Okay',

                 onPress: () => navigation.navigate('RateHunger')

              },
  
           ]
   

        ),

     },

     {

        text: "No",

     }]

  )

}

onPress: { checkComplete }
  

Комментарии:

1. Оповещение используется для отображения текста, вы пытаетесь создать всплывающее окно с вводом оценок?

2. Да, это похоже на то, что я пытаюсь сделать

3. Для этого вы можете использовать модальный параметр и иметь рейтинг внутри него

4. Можете ли вы поделиться тем, что вы пробовали с компонентом оценки, чтобы я мог обновить его модальным?

5. Да, мои извинения

Ответ №1:

Вы можете использовать Modal для создания пользовательского компонента, как показано ниже

 function RatingAlert({ visible, callback }) {
  return (
    <Modal
      animationType="slide"
      transparent={true}
      visible={visible}
      onRequestClose={() => {
        if (callback) callback();
      }}>
      <Rating
        showRating
        onFinishRating={this.ratingCompleted}
        style={{ paddingVertical: 10 }}
      />
      <Button title="Ok" onPress={callback} />
    </Modal>
  );
}
  

И используйте его, как показано ниже
//const [visible, setVisible] = useState(false);

  <RatingAlert
      visible={visible}
      callback={() => {
        //Your custom call for OK button
        setVisible(false);
      }}
    />
  

И всякий раз, когда вы хотите его показать, вы можете просто

 setVisible(true)
  

Это базовая версия, и вы можете расширить ее, отправив дополнительные реквизиты и настроив ее.

Комментарии:

1. Я пытался добавить модальную функцию к существующей функции оповещения, ваш код сработал, но не совсем то, что я искал

2. вы не можете этого сделать, но это будет работать аналогично оповещению в виде всплывающего окна, вы можете оформить его в соответствии с вашими потребностями

3. Понятно. Спасибо, что уделили время

4. Пожалуйста, отметьте ответ, если он устраняет вашу проблему 🙂

5. Это не совсем то, что я искал, но помогло мне решить, что мне нужно пойти другим путем; тем не менее, полезно.