Реагировать на нажатие кнопки Native для контроля импортированного состояния

Question

Я не знаю точного названия своего дела, поэтому я объясню подробно.

Ниже приведен мой всплывающий класс.

export default class Popup extends Component{
    constructor(props){
        super(props);
        this.state={
            isshowing: true,
        }
    }

    handleShow(){
        this.setState({isshowing:true})
    }


    return(
            <View style={{}}>
                        <TouchableOpacity
                            style={{}}
                            onPress={() => this.setState({isshowing:false})}
                        >
                            <Text>X</Text>
                        </TouchableOpacity>
            </View>
        );
    }
}

Я опустил ненужные вещи, такие как стиль и т. Д.

Я хочу контролировать видимость всплывающих классов через состояние.

Я могу сделать кнопку закрытия, так каккнопка закрытия находится во всплывающем классе, но я хочу, чтобы внешняя кнопка (внутри основного класса) делала это всплывающее окно видимым, поскольку я импортирую всплывающий класс.

Как я могу это сделать?

Answer 1

Вы можете передавать реквизиты из класса, которому вы звоните <Popup>, например:

export default class Parent extends Component{

....
<Button
 title={"Make Popup visible Button"}
 onPress={()=>this.setState({isPopupVisible:true})
/>

<Popup isVisible={this.state.isPopupVisible} />

....
}

, а в классе Popup вы должны назначить переданные реквизиты isVisible из родительского класса.в состояние класса Popup - isshowing .

Если во всплывающем окне не используется какое-либо состояние (как во многих случаях), вам следует рассмотреть возможность использования SFC (Stateless Functional Component).Гораздо проще в обслуживании.