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

【问题标题】：ListView with an element opening a Dialog带有打开对话框的元素的 ListView
【发布时间】：2017-05-26 17:22:51
【问题描述】：

我会尽力说明我的情况。

我收集了一组“事件”，然后ListView 处理所有这些行，以按预期显示。

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

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

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

我首先想到的是模态

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 /> 中，然后对数据库进行查询并显示结果。

你怎么看？可以吗？

最好的问候我的朋友

【问题讨论】：

这更像是一个设计问题，但您要做的是保持源代码完整，而不是在组件中。这样，通过映射每个源，您就有了可操作的价值。前任。 this.state.sources.map(obj => {obj.title});
抱歉，您的回答对我来说似乎有点令人困惑。我需要将其父组件<EventComponent /> 的id 传递给组件<MoreInfo />，但我无法检索它

标签： react-native modal-dialog react-navigation

【解决方案1】：

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

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

【讨论】：

让我们暂时坚持下去！结束这个项目的时间很短。谢谢！ :D