使用navigation.getParam（）反應本機導航設置的圖像名稱

Question

我對Stackoverflow的第一個問題:)

我正在使用React Navigation。 如何通過navigation.getParam（'Country'）的值加載圖像？ 此圖片未加載（錯誤代碼500）

    constructor(props) {
      super(props);
      this.state = { isLoading: true}
      const { navigation } = this.props;
      this.number = navigation.getParam('number');
      this.country = navigation.getParam('country');
    }
    return (
      <View style={bubble.container}>
        <Text>{this.country}</Text>
        <Image source={require('./img/flags/'+ this.country +'.png')} style={{width: 30, height: 30}}/>
        <FlatList
          data={this.state.dataSource}
          renderItem={({item}) => <View style={bubble.wrapper}>
                                    <Text selectable>{item.text}</Text>
                                    <View style={bubble.footer}>
                                      <View style={{flex: 1}}>
                                        <Text style={bubble.sender}>{item.sender}</Text>
                                      </View>
                                      <View style={{flex: 1}}>
                                        <Text style={bubble.time}><TimeAgo time={item.datetime} interval={20000}/></Text>
                                      </View>
                                    </View>
                                  </View>}
        />
      </View>
    );

Answer 1

首先，請確保您的img在JS代碼的路徑中可用，

假設您的js代碼文件為Country.js ，那么文件夾的結構應為：

--Country.js (File)
--img (folder)
  --flags (folder)
    --country.png (an image)

然后，嘗試更改代碼外觀，如下所示：

render(){
  const {country} = this.props.navigation.state.params
  return (
    <View style={bubble.container}>
      <Text>{country}</Text>
      <Image source={require('./img/flags/'+ country +'.png')} style={{width: 30, height: 30}}/>
      <FlatList
        ..your setting
      />
    </View>
  )
}

不要需要聲明params在constructor ，你可以聲明param的React Navigation在componentDidMount()/componentWillMount()/ even in render(){}

Answer 2

我已按網址加載圖片

        <Image source={{uri: 'http://192.168.1.222/img/'+ countryvar + '.png'}} style={{width: 30, height: 30}}/>