反應本機在組件內插入圖像

Question

我正在使用庫選擇多個按鈕，我可以自定義它。 但是，我想在這個組件中插入一個圖像。

const multipleData = [button1, button2, button3, button4, button5]
regionSelectHandler(){
     return(
     <View>
     {
      multipleData.map(
         (interest) =>
           <SelectMultipleButton
             key={interest}
             buttonViewStyle={{
               height: 60,
               width: "50",
             }}
             textStyle={{
               fontSize: 14,
             }}
             highLightStyle={{
               backgroundColor: 'white',
               textColor: 'black',
               borderTintColor: 'white',
               backgroundTintColor: '#6AAAC6',
               textTintColor: 'white',
             }}
             multiple={true}
             value={interest}
             selectable={this.state.multipleSelectedData.includes(interest)
             selected={this.state.multipleSelectedData.includes(interest)}
             singleTap={valueTap => this.trackSelection(valueTap)} />
         )
      }
      <View style={{borderWidth:0.5, borderColor:'gray'}}/>
     </View>
   )}

上面的代碼將制作 5 個按鈕，在這些按鈕中我想插入一個復選標記image ，當用戶單擊按鈕時復選標記出現，取消單擊時它消失。

有沒有辦法在這個組件中插入<Image style={{height:50, width:50}} source={require('../Assets/Image.png')}/>圖片？

Answer 1

您不能將圖像插入到該組件中，因為它不接受圖像道具並且其中沒有任何邏輯來處理圖像。 您可以做的是 fork 庫並添加邏輯以按照您需要的方式處理圖像。

這將要求您通讀 lib 的代碼並充分理解它，然后才能基本上在其中實現新功能。 如果您需要此組件在許多地方具有這種確切的行為，這可能是最好的方法。 不要忘記更改 lib 對您的 fork 的引用而不是原始引用。