Question

一旦单击按钮，我想渲染/导航到一个新的组件，将道具传递给它。

首次尝试-语法错误

Role = vm.Role.ToString("G"),
Status = vm.Status.ToString("G")

第二次尝试-未呈现组件

{
  this.state.history ? (
    this.state.history.map(data => {
      return (
        <View style={styles.historyUnit}>
          <TouchableOpacity
          onPress={return <Map2 latitude={data1} longitude={data1} />;}
          >
            {" "}
          </TouchableOpacity>
        </View>
      );
    })
  ) : (
    <ActivityIndicator size="large" color="#0000ff" />
  );
}

onPress={this.showHistory}

第三次尝试-我导航到该组件，但未传递道具

  showHistoryUnit = (data1, data2) => {
    return <Map2 latitude={data1} longitude={data1} />;
  };

我如何做到这一点？

Answer 1

this.state = {
    selectedId = 0
}

this.state.history.map(data => {
    return (
        <View style={styles.historyUnit}>
            <TouchableOpacity
                onPress={() => {
                    this.setState({ selectedId: data.id })
                }}
            >
                {data.id === this.state.selectedId &&
                    <Map2 latitude={data1} longitude={data1} />
                }
            </TouchableOpacity>
        </View>
    );
})

它只是同时返回一个Map2组件。如果要连续返回Map2，请改用数组

Answer 2

理想情况下，您应该使用模式或类似方式显示特定的Map信息，但这也可以使用组件内部状态来实现。

state = {
    mapComponent: null,
};

if (this.state.history) {
    return this.state.mapComponent || this.state.history.map(data => {
        return (
            <View style={styles.historyUnit}>
                <TouchableOpacity
                    onPress={() => this.setState({ mapComponent: <Map2 latitude={data1} longitude={data1} /> })}
                >
                    {" "}
                </TouchableOpacity>
            </View >
        );
    })
}

return <ActivityIndicator size="large" color="#0000ff" />;

Answer 3

您可以对setState使用三元运算符就像当您按下按钮时，设置一些状态，然后使用三元运算符显示视图理想情况下，请检查您的this.state.history，它应该是布尔值。

如何使用onPress（）渲染组件？

3 个答案: