Question

我无法在本机应用程序中显示图像。对于我的应用程序，我有一个与php连接的简单数据库，在其中添加了图像路径，它们存储在本地。我要做的就是检索该位置的字符串。如果我手动编写路径，它将起作用。这是组件的代码

export default class Accordian extends Component{

constructor(props) {
    super(props);
    this.state = { 
      data: props,
      expanded : false,
      updated_Height: 0,
    }

    if (Platform.OS === 'android') {
        UIManager.setLayoutAnimationEnabledExperimental(true);
    }
}

componentWillReceiveProps(update_Props) {
    if (update_Props.item.expanded) {
      this.setState(() => {
        return {
          updated_Height: null
        }
      });
    }
    else {
      this.setState(() => {
        return {
          updated_Height: 0
        }
      });
    }
  }


  shouldComponentUpdate(update_Props, nextState) {
    if (update_Props.item.expanded !== this.props.item.expanded) {
          return true;
    }
    return false;
  }

render（）{

return (
    <View style={styles.Panel_Holder}>
        
        <TouchableOpacity activeOpacity={0.7} onPress={this.props.onClickFunction} style={styles.Btn}>
        <Text style={styles.Panel_Button_Text}>{this.props.item.make} {this.props.item.model}</Text>
                <Text style={styles.Panel_Button_Text}>{this.props.item.price}$/day</Text>
        </TouchableOpacity>

        <View style={{ height: this.state.updated_Height, overflow: 'hidden' }}>
        
        
        <View style={{width:400,flexDirection:"row",  alignItems:"center", justifyContent:"space-evenly"}}>
        <View style={{width:110,}}>
        <Text style={{bottom:50, fontSize:25, fontWeight:"bold"}}>
                                 {this.props.item.name}
                             </Text>
                             <Text>
                           <Image source={require('../images/person-silhouette.png')} />
                             {this.props.item.nr_seats}
                             </Text>
                             <Text>
                           <Image source={require('../images/shopping-bag.png')} />
                             {this.props.item.bag_capacity}
                             </Text>
                             <Text>
                           <Image source={require('../images/gas-station.png')} />
                             {this.props.item.gas_desc}
                             
                             </Text>
                                {console.log( this.props.item.cars_img)}
                             </View>
                          
                             <View style={{width:220,height:300,alignItems:"center",justifyContent:"center",}}>
                             <Image style={{  flex: 1, width: '100%', height:  '1000%',resizeMode: 'contain',}} source={this.props.item.cars_img}/>
                          </View>

        
        </View>
             
      </View>
    
          
        </View>
       
)

}

Answer 1

尝试将其更改为source={{uri: this.props.item.cars_img}}

React-native无法显示数据库中的图像

1 个答案: