Question

我试图在道具改变时更新我的TouchableOpacity组件的样式。我调用一个函数，它负责返回样式。在该函数中，我记录了area.included的值。它返回正确的值，但样式不能正确更新。

<TouchableOpacity style={this.getRowStyle(area)} onPress={() => this.navToArea(area)}>
  <Text>Some Random Text</Text>
</TouchableOpacity>

getRowStyle(area) {
  console.log('area included', area.included)
  if (area.included) {
    return styles.swipeContainer
  } else {
    return styles.swipeContainerOpacity
  }
}

const styles = StyleSheet.create({
  swipeContainer: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 15,
  },
  swipeContainerOpacity: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 15,
    opacity: 0.2,
  },
})

Answer 1

我最终通过添加内联条件来解决这个问题。我仍然认为我在做的事应该有效。可能是反应错误？

{area.included &&
<TouchableOpacity style={styles.swipeContainer} onPress={() => this.navToArea(area)}>
  <Text>Some Random Text</Text>
</TouchableOpacity>
}
{!area.included &&
<TouchableOpacity style={styles.swipeContainerOpacity} onPress={() => this.navToArea(area)}>
  <Text>Some Random Text</Text>
</TouchableOpacity>
}

Answer 2

如果你只想在两个不同的样式类之间切换，你也可以将它们添加到这样的条件中：

<TouchableOpacity style={this.state.areaIncluded ? [styles.swipeContainer] : [styles.swipeContainerOpacity]} onPress={() => this.navToArea(area)}>
  <Text>Some Random Text</Text>
</TouchableOpacity>

希望这可以帮助你开始!!!

反应Component的Native更新样式

2 个答案: