我有一个聊天屏幕，从中可以显示已发送/已接收的文本，图像和语音注释，在模拟器中，一切正常运行，但是在真实设备中却显示了文本，但是图像和语音注释气泡只是一个空白。
这是我的模拟器，但是在实际设备上，我所看到的只是一个空白区域，其中应显示内容的高度和宽度。
这是我的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>
最佳答案
用于图像和声音的文件都位于计算机上，并且您使用localhost：1337 / ...来引用它们。
这显然在物理设备上不起作用，这些文件将需要添加到iOS和/或Android资产中，并且您需要使用require（''）引用不同
有关使用静态资源的更多信息，请参见in the official documentation。