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

Rai*_*ton 1 react-native

我正在使用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}/> )
}
Run Code Online (Sandbox Code Playgroud)

上面的代码有效。下面的代码不显示该图标,实际上Entypo根本不会执行。

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

我想念什么?

在此先感谢您的帮助。:)

Ash*_*k R 6

这是完整的例子

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>
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

Swipe_to_Delete

在此处输入图片说明