Reactjs 在保持模式上显示模式在本机上显示模式

我试图在另一个模型上显示一个模态，它的可见性总是设置为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>

)
}

函数搜索（{navigation}）{
const[number，setNumber]=使用状态（“”）；
const[visible，setvisible]=useState（false）；
返回(
{
设置编号（文本）；
}}
/>
{
如果（数字==''）{
{/*第一行-警报图标和标题*/}
{true&&(
)}
{/*{`${alertTitleText}}}*/}这里工作正常
{/*第二行-警报消息文本*/}
{/*{`${alertMessageText}`}*/}空值
{/*第三行-正负按钮*/}
{true&&(
{/*{positiveButtonText}*/}好的
)}
}否则{
log（'Do Nothing！'）；
}
}}>
{' '}
搜寻
)
}

---

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

制作两个组件，然后根据一个模式内的条件进行渲染，我对许多组件使用这种方式

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>

constmodalcontent=（{toggleModal}）=>{
const[defaultContent，setDefaultContent]=useState（true）；
常量条件呈现=（）=>{
if（defaultContent==true）返回(
setDefaultContent（false）}>
第一内容
);
返回(
setDefaultContent（真）}>
第二内容
);
}
返回(
{conditionalRendering（）}
);
}

你能举个例子吗？我已经编辑并给你举了一个例子，这也可以帮助你，如果有帮助，请单击“已解决”按钮。我如何将这段代码应用到我上面的组件“搜索，js”。我看到你声明

谢谢，你的方法奏效了。但是有一个问题，模态覆盖了整个屏幕，我只想显示中间的一个。看这个截图