React Native - 为模态使用道具

Question

我正在尝试在我的应用程序上使用模态，但我想分成不同的类，如 App.js 和 /components/modal。我遇到的问题是无法正确传递道具。这是我的代码。

我导入了模态

import InfoModal from '../components/InfoModal';

我创建了状态。

state = {modalVisible: false}

按键可见功能

    setModalVisible = (visible) => {
        
        this.setState({ modalVisible: visible });
    }

调用组件。

render() {

const { modalVisible } = this.state;  

return ( 

<InfoModal visible= {modalVisible} />    

<TouchableOpacity onPress={() => this.setModalVisible(true)} ><Text style={styles.infoButton}>Info</Text></TouchableOpacity>
            )}

我不明白我应该设置什么道具以及如何正确使用它。

Answer 1

在 Modal 组件中使用状态和方法，并通过使用模态引用来切换它。

放

const { modalVisible } = this.state;

和

setModalVisible = (visible) => {
        
        this.setState({ modalVisible: visible });
    }

在InfoModal.js

然后像这样使用它

   render() {
    return ( 
        <InfoModal ref={(c)= this.infoModal=c }visible= {modalVisible} />  
        <TouchableOpacity onPress={() => this.infoModal.setModalVisible(true)} ><Text style={styles.infoButton}>Info</Text></TouchableOpacity>
)

Answer 2

因为你有渲染方法，我假设你的 App.js 是一个 Class 组件。

您可以像那样在构造函数上创建状态

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

// rest of the class
}

你改变模式可见性的函数应该是这样的

setModalVisible = (visible) => {
    this.setState({modalVisible: visible});
}

这就是您在 App 上控制状态的方式 class。

对于你的模式，你将 App.state.modalVisible 作为道具传递。

<InfoModal visible={this.state.modalVisible} />

当您使用 setState 时，所有接收该新值作为 prop 的组件都会正确更新

React Native - 为模态使用道具

React Native - Using Props for Modal

javascript

react-native

react-props

react-native-modal