Невозможно прочитать свойство ‘IsAndroid’ у null / (react-native-sound)

Вопрос или проблема

Я работаю с React Native версии 0.74.5. Также я использую библиотеку react-native-sound версии 0.11.2.

У меня, в основном, чистый проект. Я хочу воспроизвести mp3 файл при нажатии на компонент TouchableOpacity.

В консоли я получаю следующее: ERROR TypeError: Cannot read property ‘IsAndroid’ of null, js engine: hermes.

Мой текущий файл App.tsx выглядит так:

import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
import Sound from 'react-native-sound'

export default function App() {
    Sound.setCategory('Playback')
    return (
        <View style={styles.container}>
            <TouchableOpacity
                style={{ backgroundColor: 'lightblue', padding: 10, borderRadius: 10 }}
                onPress={() => {
                    console.log('test')
                }}
            >
                <Text>Тест 1 - Звук</Text>
            </TouchableOpacity>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
})

react-native-sound кажется не поддерживается, последнее обновление было 3 года назад. Я бы предложил использовать другой пакет, вы можете попробовать эти:

Ответ или решение

Ошибка TypeError: Cannot read property 'IsAndroid' of null при использовании библиотеки react-native-sound может возникать по нескольким причинам, и наиболее вероятная из них связана с неправильной инициализацией или конфигурацией библиотеки. Давайте рассмотрим несколько шагов и предложений, которые помогут вам устранить эту проблему.

Причины ошибки

  1. Неправильная установка или подключение библиотеки:
    Если библиотека react-native-sound не была правильно установлена или не подключена в проекте, это может привести к ошибкам. Убедитесь, что вы выполнили необходимые шаги, описанные в документации по установке.

  2. Неправильная настройка проекта:
    Проверьте, что необходимые настройки для Android выполнены в файле android/app/build.gradle. Убедитесь, что у вас есть нужные разрешения и зависимости.

  3. Несовместимость версий:
    Использование устаревшей версии библиотеки может быть причиной конфликта. Вы используете react-native-sound версии 0.11.2. Возможно, стоит рассмотреть более современные альтернативы, которые могли бы лучше соответствовать версии React Native 0.74.5.

Решение проблемы

  1. Обновите библиотеку:
    Рассмотрите возможность использования актуальных библиотек для воспроизведения звука. Например, вы можете использовать:

    • react-native-track-player
    • expo-av
      Эти библиотеки активно поддерживаются и предлагают больше возможностей.
  2. Проверка инициализации Sound:
    Убедитесь, что вы вызываете Sound.setCategory('Playback') в нужном месте перед тем, как работать с компонентами звукопроигрывателя. Например, правильно инициализируйте библиотеку в useEffect.

  3. Пример исправленного кода:
    Вот улучшенный пример вашего файла App.tsx с учетом использования react-native-sound:

    import React, { useEffect } from 'react';
    import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
    import Sound from 'react-native-sound';
    
    Sound.setCategory('Playback');
    
    const App = () => {
       // Инициализация звука
       const sound = new Sound('test.mp3', Sound.MAIN_BUNDLE, error => {
           if (error) {
               console.error('Ошибка загрузки звука', error);
               return;
           }
       });
    
       const playSound = () => {
           sound.play(success => {
               if (!success) {
                   console.log('Ошибка при воспроизведении звука');
               }
           });
       };
    
       return (
           <View style={styles.container}>
               <TouchableOpacity
                   style={{ backgroundColor: 'lightblue', padding: 10, borderRadius: 10 }}
                   onPress={playSound}
               >
                   <Text>Тест - Воспроизведение звука</Text>
               </TouchableOpacity>
           </View>
       );
    };
    
    const styles = StyleSheet.create({
       container: {
           flex: 1,
           backgroundColor: '#fff',
           alignItems: 'center',
           justifyContent: 'center',
       },
    });
    
    export default App;
  4. Сообщение об ошибках:
    Если ошибка все еще возникает, проверьте консоль на наличие дополнительных сообщений об ошибках, которые могут дать подсказки о специфических проблемах в конфигурации проекта.

Заключение

Решение проблемы TypeError: Cannot read property 'IsAndroid' of null может потребовать проверки нескольких аспектов вашего проекта. Если вы заметите, что библиотека react-native-sound вызывает множество проблем, возможно, стоит рассмотреть переход к другой библиотеке, которая более активно поддерживается и соответствует вашему проекту.

Оцените материал
Добавить комментарий

Капча загружается...