在ListView中反應本機模態

Question

我正在嘗試將模式實現到Listview中，其中每個列表組件都是可單擊的，並調出具有相關信息的模式。 我目前無法正常工作。 我的代碼如下：

renderRow函數：

 var modalState = false;
  open = () => {
      modalState = true;
    }
    close = () => {
      modalState = false;
    }
  return (
    <View>
    <View style={{flexDirection: 'row', padding: 3}}>
    <Card
    >
    <CardItem>
    <TouchableHighlight
    style={{padding: 15}}
    underlayColor = 'transparent'
    onPress = {() => {
      modalState = true;
      alert(modalState);
    }}
    >
    <Text style = {{color:'grey'}}>{devices.name}</Text>
    </TouchableHighlight>
    <TouchableHighlight
    style={{padding: 15}}
    underlayColor = 'transparent'
    onPress = {() => {
      modalState = true;
      alert(modalState);
    }}>
    <View>
    <Text>                    </Text>
    </View>
    </TouchableHighlight>
    </CardItem>
    </Card>
    </View>
    <Modal isVisible={modalState}>
    <Card>
    <CardItem>
    <View style = {styles.modal}>
        <Text>{devices.name}</Text>
        <Button
          title = "close"
          onPress = {() => {
            modalState = false;
          }}
          />
    </View>
    </CardItem>
    </Card>
    </Modal>
    </View>
  );

Answer 1

您應該將modalState變量移至類狀態。 您的代碼中發生的事情是modalState進行了適當的更改，但是並沒有強制組件進行重新渲染，因此modal沒有接收到新的支持，this.setState應該可以解決此問題。

class listWithModal extends React.Compoent {

    constructor(props) {
        super(props)
        this.state = {
            modalState = false
        }
    }
    render() {
        const {modalState} = this.state
        const open = () => {
            this.setState({ modalState: true })
        }
        const close = () => {
            this.setState({ modalState: true })
        }
        return (
            <View>
                <View style={{ flexDirection: 'row', padding: 3 }}>
                    <Card
                    >
                        <CardItem>
                            <TouchableHighlight
                                style={{ padding: 15 }}
                                underlayColor='transparent'
                                onPress={() => open()}
                            >
                                <Text style={{ color: 'grey' }}>{devices.name}</Text>
                            </TouchableHighlight>
                            <TouchableHighlight
                                style={{ padding: 15 }}
                                underlayColor='transparent'
                                onPress={() =>open()}>
                                <View>
                                    <Text>                    </Text>
                                </View>
                            </TouchableHighlight>
                        </CardItem>
                    </Card>
                </View>
                <Modal isVisible={modalState}>
                    <Card>
                        <CardItem>
                            <View style={styles.modal}>
                                <Text>{devices.name}</Text>
                                <Button
                                    title="close"
                                    onPress={() => close()}
                                />
                            </View>
                        </CardItem>
                    </Card>
                </Modal>
            </View>
        );
    }
}