在 React Native 的保持模态上显示模态

Question

我试图在另一个模型上显示模态，它的可见性始终设置为 true。我尝试了多种方法，但仍然无法显示该模式。我在这里打印代码以使其有意义：

function Search({navigation}) {
  const [number, setNumber] = useState('');
  const [visible, setvisible] = useState(false);


 return (

 <View style={{flex: 1, backgroundColor: 'rgba(0,0,0,0.5)'}}>
      <Modal
        visible={true}
        transparent={true}
        style={{
          elevation: 24,
          borderRadius: 24,
          marginTop: 60,
          backgroundColor: '#fafcff',
        }}>
        <View
          style={{
            margin: 50,
            padding: 10,
            borderRadius: 35,
            height: 40,
            flexDirection: 'column',
            justifyContent: 'center',
            shadowColor: '#000',
            shadowOffset: {
              width: 0,
              height: 12,
            },
            shadowOpacity: 0.58,
            shadowRadius: 16.0,

            elevation: 24,
          }}>
          <TextInput
            label="Enter a phone number"
            value={textInput}
            keyboardType="numeric"
            maxLength={12}
            mode="outlined"
            dense={true}
          
            // ref={textInput.current.clear()}
            theme={{
              colors: {
                primary: '#00aaff',
              },
            }}
            onChangeText={(text) => {
   
              setNumber(text);
            }}
          />
<Button
          mode="contained"
          theme={{
            colors: {
              primary: '#006aff',
            },
          }}
          style={{
            margin: 70,
            marginTop: 10,
            padding: 2,
            shadowColor: '#000',
            shadowOffset: {
              width: 0,
              height: 5,
            },
            shadowOpacity: 0.34,
            shadowRadius: 6.27,
            justifyContent: 'center',
            elevation: 18,
            borderRadius: 18,
            textAlign: 'center',
          }}
          onPress={() => {
            if (number === '') {
              
              <Modal visible={!visible} transparent={true} animationType={'fade'}>
              <View style={styles.mainOuterComponent}>
                <View style={styles.mainContainer}>
                  {/* First ROw - Alert Icon and Title */}
                  <View style={styles.topPart}>
                    {true && (
                      <Image
                        source={require('../images/ic_notification.png')}
                        resizeMode={'contain'}
                        style={styles.alertIconStyle}
                      />
                    )}
                    <Text style={styles.alertTitleTextStyle}>
                      {/* {`${alertTitleText}`} */} Here worked
                    </Text>
                  </View>
                  {/* Second Row - Alert Message Text */}
                  <View style={styles.middlePart}>
                    <Text style={styles.alertMessageTextStyle}>
                      {/* {`${alertMessageText}`} */} EMpty value
                    </Text>
                  </View>
                  {/* Third Row - Positive and Negative Button */}
                  <View style={styles.bottomPart}>
                    {true && (
                      <TouchableOpacity
                        //   onPress={this.onPositiveButtonPress}
                        style={styles.alertMessageButtonStyle}>
                        <Text style={styles.alertMessageButtonTextStyle}>
                          {/* {positiveButtonText} */} Okay
                        </Text>
                      </TouchableOpacity>
                    )}
                  </View>
                </View>
              </View>
            </Modal>
              
       
            } else {
              console.log('Do Nothing!');
            }
          }}>
          <Text
            style={{
              fontSize: 25,
              color: 'white',
              textAlign: 'center',
            }}>
            {' '}
            <MaterialCommunityIcons
              name="database-search"
              size={40}
              color="yellow"
              style={{
                paddingRight: 5,
                alignItems: 'center',
                margin: 5,
              }}></MaterialCommunityIcons>
            Search
          </Text>
        </Button>

          </Modal>

        </View>

)
}

预计当用户在输入为空时单击“搜索”时，会出现一个显示输入空值的模式。我什么都没有，没有错误。我该如何解决？

Answer 1

制作两个组件，然后根据一个模态内的条件渲染它，我对很多组件都采用这种方式。

const ModalContent = ({toggleModal}) => {

  const [defaultContent, setDefaultContent] = useState(true);

  const conditionalRendering = ()=> {

    if(defaultContent === true) return (
     <View>
       <TouchableOpacity onPress={()=> setDefaultContent(false)}>
         <Text>First Content</Text>
       </TouchableOpacity>
     </View>
    );


   return (
     <View>
       <TouchableOpacity onPress={()=> setDefaultContent(true)}>
         <Text>Second Content</Text>
       </TouchableOpacity>
     </View>
   );
  
  }

  return (
   <View style={{flex:1, justifyContent: 'center', alignItems: 'center'}}>
      {conditionalRendering()}
   </View>
  );

}

<Modal
  useNativeDriver
  onBackButtonPress={toggleModal}
  isVisible={modalVisible}
  style={{ padding: 0, margin: 0, justifyContent: 'center' }}
 >
    <ModalContent toggleModal={toggleModal} />

</Modal>

在 React Native 的保持模态上显示模态

Display a Modal on a holding modal on react native

jsx

reactjs

react-native

react-native-android