Question

我正在使用一个库select multiple buttons，并且可以对其进行自定义。但是，我要在此组件中插入图片。

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

您不能直接在此组件中插入图像，这是因为它不使用图像道具并且其中没有任何逻辑来处理图像。您可以做的就是派出lib库，并添加逻辑以所需的方式处理图像。

这需要您通读lib的代码并充分理解它，然后才能基本实现新功能。如果您需要此组件在许多地方具有确切的行为，则可能是最好的方法。不要忘记将lib的引用更改为您的fork，而不是原始的。

反应本机将图像插入组件内部

1 个答案: