Question

我在本机和编程方面还是一个新手，我正在尝试将平面列表中的项目传递给模式。我要通过的是图标，状态和描述。我应该怎么做？

这是我的单位列表

buildPanel(index, item) {
    let panel = [];
    let keys = DBkeys['Requests'].MyRequest;
    
    let status = item[keys['status']];
    panel.push(<View style={{ position: 'absolute', right: 0, bottom: 0, padding: normalize(5), alignItems: 'center' }} key={'status'}>
      <TouchableOpacity onPress={this.handleShowModal}>
        <Icon name={img.itemStatus[status].name} type={img.itemStatus[status].type} color={img.itemStatus[status].color} size={normalize(38)} />
      </TouchableOpacity>
    </View>);

    return panel;
    }
    
    <View style={[styles.panelContainer, status === 'success' ? {} : { backgroundColor: color.white }]}>
              <FlatList
                showsVerticalScrollIndicator={false}
                progressViewOffset={-10}
                refreshing={this.state.refreshing}
                onRefresh={this.onRefresh.bind(this)}
                onMomentumScrollEnd={(event) => event.nativeEvent.contentOffset.y === 0 ? this.onRefresh() : null}
                data={content}
                renderItem={({ item }) => item}
                keyExtractor={(item, key) => key.toString()}
                 />
            </View>
            <IconModal visible={this.state.modalVisible} close={this.handleDismissModal}/>

这是我的IconModal.js

const IconModal = (props) => {

    return(
        <Modal 
            isVisible={props.visible}
            onBackdropPress={props.close}
        >
            <View style={styles.dialogBox}> 
                <View style={styles.icon}>
                    <Icon name='open-book' type='entypo' color='#ffb732' size={normalize(70)} />
                </View>

                <View style={styles.text}>
                    <Text style={styles.status}>Status</Text>
                    <Text>Desc</Text>
                </View>
                    <TouchableOpacity onPress={props.close}>
                        <View>
                            <Text style={styles.buttonText}>GOT IT</Text>
                        </View>
                    </TouchableOpacity>   
            </View>
            
        </Modal>
    )
}

IconModal.propTypes ={
    visible: PropTypes.bool.isRequired,
    close: PropTypes.func,
}

Answer 1

来自您的renderItem的{{1}}，

您必须单击某个位置以打开模式，

当您单击将整个单个项目存储在状态变量中时，

就像，如果您使用的是FlatList，则

TouchableOpacity

以及您的模式组件中

您可以使用prop传递数据。

<TouchableOpacity onPress={this.passDataToModal}/>
...
...
passDataToModal=(item)=>{
 this.setState({modalData:item},()=>{
   //you can open modal here
});
}

，您可以将<IconModal modalData={this.state.modalData} visible={this.state.modalVisible} close={this.handleDismissModal}/>中的这些数据用作IconModal。

如果有更多数据，那么您随时可以添加另一个道具。

Answer 2

例如：

class容器扩展了组件{ 构造函数（道具）{ 超级（道具） this.state = { modalVisible：否， activeItemName：''，//状态属性保存项目名称 activeItemId：null，//持有商品ID的状态属性 } }

openModalWithItem(item) {
    this.setState({
        modalVisible: true,
        activeItemName: item.name,
        activeItemId: item.id
    })
}

render() {

    let buttonList = this.props.item.map(item => {
        return (
            <TouchableOpacity onPress={() => { this.openModalWithItem(item) }}>
                <Text>{item.name}</Text>
            </TouchableOpacity>
        )
    });

    return (
        <View>
            {/* Example Modal Component */}
            <Modal isOpen={this.state.openDeleteModal}
                itemId={this.state.activeItemId}
                itemName={this.state.activeItemName} />
            {buttonList}
        </View>
    )
}

}

Answer 3

在函数Component中定义以下挂钩。

const [modalVisible, setModalVisible] = useState(false);
const [modalData, setModalData] = useState([]);
const [modalTitle, setModalTitle] =  useState('');

现在触发打开模态的功能，同时将数据传递给模态。

<TouchableHighlight underlayColor="skyblue" onPress={() => { openSettingsModal(title,settings) } }>
    Open Modal
</TouchableHighlight>

这是功能代码-

const openSettingsModal = (title,settings) => {
    setModalTitle(title);
    setModalData(settings);
    setModalVisible(!modalVisible);
}

最后是一段模态代码。

<Modal animationType="none" transparent={true} visible={modalVisible} >
    <View style={styles.centeredView}>
        <Text> { modalTitle }</Text>
        <Text> { modalData }</Text>
    </View>
</Modal>

将本机传递数据反应为模态

3 个答案: