反应本机模态未显示

Question

>我正在尝试在不转到另一个屏幕的情况下显示模态，我希望它显示在当前屏幕上，但不是通过导航显示。模态没有弹出，我不知道问题所在。

我正在使用渲染模态在屏幕上显示模态。当我使用this.props.navigation.navigate（'AnotherModal'）时，它可以工作，但会转到另一个屏幕，这次我想在同一屏幕上显示模态。

import * as React from 'react';
import { Text, View, Image, 
StyleSheet,Alert,Modal,TouchableHighlight } from 'react-native';
import { Constants } from 'expo';
import { Appbar, Colors, FAB } from 'react-native-paper';
import ProductsModal from './ProductsModal';
import ModalTester from './ModalTester';

export default class AppBar extends React.Component {
state = {
    modalVisible: false,
  };
  setModalVisible(visible) 
  {
    this.setState({modalVisible: visible});
  }

renderModal() {
    return (
        <Modal
        animationType="slide"
        transparent={false}
        visible={this.state.modalVisible}
        onRequestClose={() => {
          Alert.alert('Modal has been closed.');
        }}>
        <View style={{marginTop: 22}}>
          <View>
            <Text>Hello World!</Text>
            <TouchableHighlight
              onPress={() => {
                this.setModalVisible(!this.state.modalVisible);
              }}>
              <Text>Hide Modal</Text>
            </TouchableHighlight>
          </View>
        </View>
      </Modal>
    );
   }
render() {
const { navigate } = this.props.navigation;
return (
    <View style={styles.appbar}>
      <Appbar style={styles.piece}>
        <Appbar.Action
          icon={require('../../assets/devices.png')}
         onPress={this.renderModal.bind(this)}
        />
      </Appbar>
      <View>  
      <Image
        source={require('../../assets/cutout.png')}
        style={styles.cutout}
        pointerEvents="none"
      />
      <FAB 
      icon={require('../../assets/add_circle.png')}
      color="#b2beb5"
      onPress={() => navigate('Homes')} 
      style={styles.fab} />
      </View>
      <Appbar style={[styles.piece, styles.right]}>
        <Appbar.Action
          icon={require('../../assets/account_box.png')}
          onPress={() => console.log('Account pressed')}
        />
      </Appbar>
    </View>
   );
  }
}
const styles = StyleSheet.create({
 container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
//backgroundColor: '#ecf0f1',
padding: 8,
},
appbar: {
  position: 'absolute',
left: 0,
right: 0,
bottom: 0,
height: 56,
flexDirection: 'row',
 },
piece: {
flex: 1,
backgroundColor: Colors.grey300,
},
right: {
justifyContent: 'flex-end',
 },
 cutout: {
height: 56,
width: 80,
tintColor: Colors.grey300,

 },
fab: {
position: 'absolute',
margin: 12,
bottom: 16
   }
});

Answer 1

您应该

先尝试在constructor中绑定您的setModalVisible：

constructor(props) {
  super(props);
  this. setModalVisible = this. setModalVisible.bind(this);
}

然后将您的第一个Appbar.Action更改为如下所示：

<Appbar.Action
   icon={require('../../assets/devices.png')}
   onPress={() => this. setModalVisible(true)}
/>

此外，您还必须将Modal添加到呈现的代码中

...
<Appbar.Action
          icon={require('../../assets/account_box.png')}
          onPress={() => console.log('Account pressed')}
        />
      </Appbar>
    {this.renderModal()}
    </View>

我不确定绑定是否必要

Answer 2

由于屏幕不会更改，因此Modal需要位于该屏幕的呈现方法中。这意味着它可以通过组件的状态来处理。例如，要显示它，您可以：

<Appbar.Action
   icon={require('../../assets/devices.png')}
   onPress={() => this.setModalVisible(true)}
/>

在主render中，您可以直接添加renderModal，因为它的visible道具足以处理该行为：

render() {
const { navigate } = this.props.navigation;
return (
    <View style={styles.appbar}>
      <Appbar style={styles.piece}>
        <Appbar.Action
          icon={require('../../assets/devices.png')}
         onPress={this.renderModal.bind(this)}
        />
      </Appbar>
      <View>
      {this.renderModal()}
      <Image
        source={require('../../assets/cutout.png')}
        style={styles.cutout}
        pointerEvents="none"
      />
      <FAB 
      icon={require('../../assets/add_circle.png')}
      color="#b2beb5"
      onPress={() => navigate('Homes')} 
      style={styles.fab} />
      </View>
      <Appbar style={[styles.piece, styles.right]}>
        <Appbar.Action
          icon={require('../../assets/account_box.png')}
          onPress={() => console.log('Account pressed')}
        />
      </Appbar>
    </View>
   );
  }