Question

我正在使用react-native-swipeout，它运行正常。我可以创建一个添加图标的功能，但使用倾斜功能不起作用。我没有错误，但图标不显示。例如：

var buttons = [{
text: 'Delete', 
component: this.icon('trash'), 
backgroundColor: '#ff0000', 
onPress: function() {self.pcDelete(data)}}
];

icon(iconName) {
    return ( <Entypo name={iconName} size={30}/> )
}

上面的代码有效。下面的代码不显示图标，事实上Entypo根本没有执行。

var buttons = [{
text: 'Delete', 
component: function() { return ( <Entypo name={iconName} size={30}/> )  },
backgroundColor: '#ff0000', 
onPress: function() {self.pcDelete(data)}}
];

我错过了什么？

提前感谢您的帮助。：）

Answer 1

以下是完整示例

class SwipeoutExample extends Component {

  render() {
    const swipeBtns = [
      {
        component: (
          <View
              style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
                flexDirection: 'column',
              }}
          >
            <Image source={require('../../../../../images/delete_white.png')} />
          </View>
        ),
        backgroundColor: colors.bitterSweetBorder,
        underlayColor: 'rgba(0, 0, 0, 1, 0.6)',
        onPress: () => {
          console.log("Delete Item");
        },
      },
    ];

    return (
        <Swipeout
            right={swipeBtns}
            autoClose="true"
            backgroundColor="transparent"
        >
          <TouchableOpacity style={styles.cartItem} onPress={this.onItemClick}>

          </TouchableOpacity>
        </Swipeout>
    );
  }
}

Swipe_to_Delete

Answer 2

男人！使用＆＃34;组件＆＃34;的解决方案是：

let swipeoutBtns = [
  {
    component:
      (
        <Viev>
          <Icon style={styles.icon} name='shopping-cart'/>
        </Viev>
      )
  }
]

Answer 3

我也很难找到答案，但one of the files in the github repo for react-native-swipeout告诉你如何做到这一点。基于该示例，以下代码适用于我：

component: <Image source={{uri: 'https://upload.wikimedia.org/wikipedia/commons/7/78/BlackStar.PNG'}} style={{width: 30, height: 30}} />

带有图标的React-Native-Swipeout自定义按钮

3 个答案: