如何使用 onPress() 渲染组件？

Question

I'd like to render / navigate to a new component passing props to it once I click on a button.

First attempt - syntax is wrong

{
  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" />
  );
}

Second attempt - component is not rendered

onPress={this.showHistory}

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

Third attempt - I navigate to the component, but props are not passed

  showHistoryUnit = (data1, data2) => {
    this.props.navigation("map2")
    return <Map2 latitude={data1} longitude={data1} />;
  };

How can I make this happen?

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>
    );
})

it just returns a Map2 component in the same time. if you want return Map2 in a row use array instead

Answer 2

Ideally, you should use a modal or similar for displaying specific Map information but this can also be achieved using component internal state.

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理想情况下检查你的this.state.history ，它应该是一个布尔值。