Question

我试图显示模态而不转到另一个屏幕，我希望它显示在当前屏幕上，而不是通过导航显示。模态不会弹出，我也不知道问题所在。

我正在使用renderModal在屏幕上显示模态。当我使用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

您应该首先尝试将setModalVisible绑定到constructor中：

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>

   );
  }

React Native Modal没有显示

2 个答案: