ios - React Native 图像和声音无法在真实设备上播放

Question

我有一个聊天屏幕，我从中显示发送/接收的文本、图像和语音笔记，每件事在模拟器中都运行良好，但在真实设备中显示文本，但图像和语音笔记气泡只是一个空格。

这是我的模拟器，但在真实设备上我看到的只是一个空白区域，其中包含应该显示的内容的高度和宽度。

这是我的 chat.js 文件

<Container loading={ this.state.loading }>

    <StatusBar barStyle="light-content" />

      <View style={ styles.messages_outer_container }>

        <View style={ styles.countdown_container }>

          <Text style={ styles.countdown }> { (this.state.appointment.status == 'completed') ? 'Appointment Completed' : this.state.session ? this.state.session : 'Waiting For Consultant Approval' } </Text>

          <View style={ styles.countdown_hr } />

        </View>

        <FlatList
          inverted
          ref={ (ref) => this.chat_list = ref }
          data={ this.state.on_load_message }
          keyExtractor={ item => item.id }
          renderItem={ ({ item }) => <ChatBubbles message={ item } from={ this.state.from } /> }
        />

      </View>

      <KeyboardAvoidingView behavior="padding">

        <ChatBottomContainer
          set_message={ (message) => this.setState({ message }) }
          send_message={ () => this.send_message(this.state.message, 'text') }
          message={ this.state.message }
          end_session={ this.state.end_session }
          send_attachment={ this.send_attachment }
          send_voice_note={ this.send_voice_note }
        />

      </KeyboardAvoidingView>

    </Container>

这是我的 chat-bubbles.js

class ChatBubbles extends Component {

  constructor(props) {
    super(props);
    this.state = { timer: moment().minute(0).second(0), is_playing: false };
  }

  play_sound = (file_path) => {

let voice_note = new Sound(file_path, undefined, error => {

  if (error) {
    console.warn(error);
    return;
  }

  else {

    this.timer = setInterval(() => this.setState(prev => ({ timer: prev.timer.add(1, 'second') })), 1000)

    this.setState({ is_playing: true })

    voice_note.play(() => {

      voice_note.release()

      clearInterval(this.timer)

      this.setState({ timer: moment().minute(0).second(0) })

      this.setState({ is_playing: false })

    })

  }

    })

  }

  render () {

    return (

      <View style={ styles.container }>

        <View style={ [ styles.message_bubble_container, (this.props.message.sender == this.props.from) ? { justifyContent: 'flex-start' } : { justifyContent: 'flex-end' } ] }>

            {
              (this.props.message.type == 'image')

          ? <View style={ [ (this.props.message.sender == this.props.from) ? styles.message_bubble_to_img : styles.message_bubble_img ] }>

              <Image source={{ uri: `http://localhost:1337/${this.props.message.message}` }} style={ styles.image } />

            </View>

          : (this.props.message.type == 'voice_note')

          ? <View style={ [ (this.props.message.sender == this.props.from) ? styles.message_bubble_to : styles.message_bubble, styles.voice_note_bubble ] }>

                {
                  this.state.is_playing
                  ? <TouchableOpacity onPress={ () => this.play_sound(`http://localhost:1337/${this.props.message.message}`) }>
                      <Icon name="ios-pause" type="Ionicons" style={ styles.play_sound } />
                    </TouchableOpacity>

                  : <TouchableOpacity onPress={ () => this.play_sound(`http://localhost:1337/${this.props.message.message}`) }>
                      <Icon name="ios-play" type="Ionicons" style={ styles.play_sound } />
                    </TouchableOpacity>
                }

              <Text style={ styles.voice_note_time }> { moment(this.state.timer).format('mm:ss') } </Text>

            </View>

          : <View style={ [ (this.props.message.sender == this.props.from) ? styles.message_bubble_to : styles.message_bubble ] }>

             <Text style={ [ (this.props.message.sender == this.props.from) ? styles.message_bubble_txt_to : styles.message_bubble_txt ] }>{ this.props.message.message }</Text>

           </View>

        }

      </View>

      <View style={ [ styles.message_date_container, (this.props.message.sender == this.props.from) ? { justifyContent: 'flex-start' } : { justifyContent: 'flex-end' } ] }>

        <Text style={ styles.message_date }>{ moment(this.props.message.date).format('DD-MM-YYYY hh:mm A') }</Text>

      </View>


  </View>

)

}

}

这是我的 info.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>labayh</string>
            </array>
        </dict>
    </array>
    <key>CFBundleDevelopmentRegion</key>
    <string>en</string>
    <key>CFBundleDisplayName</key>
    <string>Labayh</string>
    <key>CFBundleExecutable</key>
    <string>$(EXECUTABLE_NAME)</string>
    <key>CFBundleIdentifier</key>
    <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
    <key>CFBundleInfoDictionaryVersion</key>
    <string>6.0</string>
    <key>CFBundleName</key>
    <string>$(PRODUCT_NAME)</string>
    <key>CFBundlePackageType</key>
    <string>APPL</string>
    <key>CFBundleShortVersionString</key>
    <string>1.0</string>
    <key>CFBundleSignature</key>
    <string>????</string>
    <key>CFBundleVersion</key>
    <string>1</string>
    <key>OPENTOK_API_KEY</key>
    <string>46232102</string>
    <key>NSCameraUsageDescription</key>
    <string>${PRODUCT_NAME} Camera Usage</string>
    <key>NSMicrophoneUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to access you microphone.</string>
    <key>LSRequiresIPhoneOS</key>
    <true/>
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSAllowsArbitraryLoads</key>
        <true/>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>
    <key>NSLocationWhenInUseUsageDescription</key>
    <string/>
    <key>NSPhotoLibraryAddUsageDescription</key>
    <string>$(PRODUCT_NAME) would like to save photos to your photo gallery</string>
    <key>NSPhotoLibraryUsageDescription</key>
    <string>$(PRODUCT_NAME) would like access to your photo gallery</string>
    <key>UIAppFonts</key>
    <array>
        <string>DINNextLTArabic-Regular.ttf</string>
        <string>Entypo.ttf</string>
        <string>EvilIcons.ttf</string>
        <string>Feather.ttf</string>
        <string>FontAwesome.ttf</string>
        <string>Foundation.ttf</string>
        <string>Ionicons.ttf</string>
        <string>MaterialCommunityIcons.ttf</string>
        <string>MaterialIcons.ttf</string>
        <string>Octicons.ttf</string>
        <string>Roboto_medium.ttf</string>
        <string>Roboto.ttf</string>
        <string>rubicon-icon-font.ttf</string>
        <string>SimpleLineIcons.ttf</string>
        <string>Zocial.ttf</string>
    </array>
    <key>UIBackgroundModes</key>
    <array>
        <string>remote-notification</string>
    </array>
    <key>UIRequiredDeviceCapabilities</key>
    <array>
        <string>armv7</string>
    </array>
    <key>UISupportedInterfaceOrientations</key>
    <array>
        <string>UIInterfaceOrientationPortrait</string>
    </array>
    <key>UIViewControllerBasedStatusBarAppearance</key>
    <false/>
</dict>
</plist>

Answer 1

您用于图像和声音的文件都位于您的计算机上，您使用 localhost:1337/...这显然不适用于物理设备，这些文件需要添加到 iOS 和/或 Android Assets 中，并且您需要使用 require('') 以不同的方式引用它们

可以找到有关使用静态资源的更多信息in the official documentation .