Question

在我的代码中，我在TouchableHighlight中使用了Icon。但是当我单击它时，什么也没有发生。它看起来像图像。 TouchableHighlight的效果未呈现。这个项目是使用react native和typescript完成的。

但是，相同的代码可以正常工作，而TouchableHighlight的效果可以很好地在javascript的react-native中呈现。

这是代码。

<TouchableHighlight style={styles.plusIconView} onPress={ () => this.signIn() }> <Icon name="plus" color="white"size={28} /> </TouchableHighlight>

这是样式类

plusIconView: { width: 30, height: 30, backgroundColor: '#42d4f4', borderRadius: 50, alignItems: 'center', marginLeft: "5%" }

功能signIn已正确实现。我该如何解决这个问题。

Answer 1

我知道了。上面的代码在单独的组件（ProfileCard）中。我将其插入App.tsx中的View中。在该View中，需要给出flex:1的样式，如下所示。

<View style={{flex:1}}> <ProfileCard /> </View>

现在正在工作。

Answer 2

您可以添加console.log("Button touched")而不是this.signIn()吗？确保正确编译Typescript代码。下一步是查找Typescript版本中的this。在普通javascript中，this是指执行上下文，而在打字稿中，它是指更直观的词法范围，因此您可以：

尝试在不使用this的情况下重构和调用函数
或通过redux道具传递函数，并将其称为this.props.onPress()。

Answer 3

您可以用style = {{flex：1}}替换样式对象，然后尝试一下是否可行。

  <TouchableHighlight style={{ flex: 1 }} onPress={ () => console.log('test')} >
<Icon  name="plus" color="white"size={28} /> 
</TouchableHighlight>

touchableHighlight无法与打字稿

3 个答案: