带有打开对话框的元素的 ListView

Question

我会尽力解释我的情况。

我收集了一个 "events" 的数组，然后 ListView 处理所有这些行，以按我的预期显示。

<ListView
   dataSource={this.state.dataSource}
   enableEmptySections={true} // For warning...
   renderRow={(rowData) => <EventComponent data={rowData} />}
/>

<EventComponent /> 是呈现所有行的那个。

我现在需要做的要求是： 显示有关每个事件的更多信息，单击事件的标题（换句话说，单击并弹出）

我第一个想到的是Modal

class EventComponent extends Component {
constructor(props) {
    super(props);
    this.state = {
        modalVisible: false,
    }
}

render() {
    return (
        <View style={styles.userDefined.event}>

            <MoreInfo data={this.props.data} show={this.state.modalVisible}/>   <------ my solution

            <View style={{flex:0.02, backgroundColor: this.props.data.color}} />
            <View style={{flex: 0.98, marginLeft: 5}}>
                <Text onLongPress={() => !this.state.modalVisible} style={[styles.userDefined.eventName, {color: this.props.data.color}]}>{this.props.data.name}</Text>
                <Text style={styles.userDefined.eventBy}>{this.props.data.owner}</Text>
                <Text style={styles.userDefined.eventContent}>{this.props.data.startTime} - {this.props.data.endTime}</Text>
                <Text style={styles.userDefined.eventContent}>Espacio: {this.props.data.space}</Text>
            </View>
        </View>
    )
}
}

到目前为止，<MoreInfo /> 组件是我的解决方案，但我有两个问题（这就是它证明我是反应新手的方式）

我需要在按下事件 (<EventComponent />) 时显示模态框 (<MoreInfo />)
我需要检索一个 event_id（已经在 <EventComponent /> 和 this.props.data.event_id 中分配）到模态 <MoreInfo /> 中，然后查询数据库和显示结果。

你怎么看？有可能吗？

朋友们问好

Answer 1

是的，你做的完全正确。我的意思是使用状态 modalvisible 来控制模态（实际上是对话框）的可见性并将 this.props.data 传递给模态是合理的。

所以你担心什么？如果您在使用过程中没有问题，则无需考虑最佳实践。 :)

带有打开对话框的元素的 ListView

ListView with an element opening a Dialog

modal-dialog

react-native

react-navigation