Question

在我的一个屏幕中，我有一个模态来显示一些选项。这是我在WelcomeScreen.js中的模态：

this.state={
   showLoginOption:false
   }

...

 <Modal visible={this.state.showLoginOption} animationType='slide'>
<Icon name='ios-close' onPress={()=>this.setState({showMe:false})} >
<Modal/>

 <TouchableOpacity onPress={()=>this.setState({showLoginOption:true})} />

它完全可以正常工作，但是为了提高代码的可读性，我想将其转换为组件文件。但是，我真的不知道如何通过道具控制可见属性。

我已经在新组件中尝试过此操作

WelcomeScreen.js

this.state={
  showLoginOption:false
  }

...

<LoginOption showMe={this.state.showLoginOption}/>

...
<TouchableOpacity onPress={()=>this.setState({showLoginOption:true})} />

LoginOption.js

   constructor(props){
       super(props);
       this.state={
           showMe:props.showMe
       }
   }
...
<Modal visible={this.state.showMe} animationType='slide'>
<Icon name='ios-close' onPress={()=>this.setState({showMe:false})} >
<Modal/>

这一次，当我按TouchableOpacity时，什么也没发生。

谢谢您的时间：）

Answer 1

//WelcomeScreen.js
this.state={
  showLoginOption:false
  }

 //function for handle modal visibility 
 handleModalVisibility : (action)=> this.setState({showLoginOption : action})

...

<LoginOption showMe={this.state.showLoginOption} modalVisibility={this.handleModalVisibility}/>

...
<TouchableOpacity onPress={this.handleModalVisibility.bind(this,true)} />

 export const LoginOption  = ({showMe,modalVisibility})=> (
 <Modal visible={showMe} animationType='slide'>
 <Icon name='ios-close' onPress={modalVisibility.bind(this,false)} >
 <Modal/>
)

使用道具控制模式

1 个答案: