反应本机 模态：简介
模态是一个预定义的组件，可帮助我们创建React Native的模态弹出窗口。通常，模态组件是在封闭视图上方显示内容的主要方式。
例如，如果您想更好地控制如何在其余应用程序中呈现模态，该怎么办。在这种情况下，您必须考虑使用顶级导航器。
最重要的是，您首先需要了解React Native Model的主要目标。最重要的是，肯定的目标是扩展原始的本机“模态”组件。为此，我们还需要添加动画和样式自定义选项。除此之外，我们仍然需要提供一个简单的API。
反应本机 模态的一些功能是-
–它使我们能够流畅地输入/退出动画。
–它使我们能够使用简单，灵活的API
–使我们可以自定义背景的不透明度，颜色和时间。
–它包括模态动画结尾的侦听器
–在设备旋转时正确调整自身大小
–使应用程序可滑动
–允许我们使应用滚动。
设定-
该库可在npm上使用。您可以使用npm安装它-react-native-modal或yarn add 反应-native-modal。
先决条件-
最重要的是，在开始之前，您需要检查一些事情。这些就是您是否具有以下工具，框架和软件包。要继续下去，您将需要：
– Node.js
– NPM
– React-Native
–React-Native CLI
–文字编辑器或IDE
–Xcode或Android Studio。
启动React Native项目-
在终端中运行以下命令，以全局安装最新的React Native CLI版本：
npm install -g 反应-native-cli
让我们首先安装react native应用程序：
反应-native init modalreactnative
下一步将转到项目目录。
cd模态反应性
运行以下命令以检查已安装的React Native版本：
反应-native -v
# 反应-native-cli: 2.0.1
# 反应-native: 0.61.5
使用Xcode Emulator运行React Native App
Xcode IDE是Apple开发经验的核心。它与Cocoa和Cocoa Touch框架很好地融合在一起，并且为Mac，iPhone，iPad，Apple Watch和Apple TV的应用程序开发提供了惊人的高效环境。
以下是允许您从Apple网站下载Xcode的过程：
–首先，访问Apple Developer
–点击开发选项
–点击下载并登录您的帐户。
–接下来，滚动到底部，然后单击以查看更多下载
–在搜索栏上搜索Xcode。
–单击具有所需Xcode版本的行上的小加号图标。
–单击并下载压缩文件。
下一步将是使用命令行工具为Xcode设置路径。
这样做的过程是：
– Go to Xcode
– Preferences
–位置并找到命令行工具：下拉菜单中的Xcode xx.x.x（版本号）。
接下来运行以下命令来安装cocoapods：
须藤宝石安装cocoapods
稍后，我们需要使用以下代码进入您项目的ios文件夹：
光盘ios
此外，在停留在iOS文件夹中的同时运行以下命令：
吊舱安装
完成上述步骤后，我们都完成了配置。现在我们需要做的就是从iOS文件夹中移出并在终端中运行命令以使用Xcode在iOS模拟器中启动应用程序。
反应-native run-ios
要在Android设备或模拟器上运行您的应用，您需要执行一些步骤。首先，您需要在计算机上设置android开发环境。此外，您只需要运行以下命令：
反应-native run-android
添加按钮以打开模态对话框：
此外，我们将学习如何向本机应用程序添加酷炫且时尚的按钮。此外，此按钮还将负责打开模式。但是仅当用户单击此按钮时，此操作才会发生。
但是，最重要的是，您需要记住，我们不会使用 纽扣 零件。另一方面，我们将使用 touchableOpacity 零件。结果，它将创建按钮并为其提供自定义样式。
首先，让我们打开App.js文件。之后，我们需要将其替换为以下代码：
// App.js
从导入React，{组件}‘react’;
导入{
View,
Text,
StyleSheet,
TouchableOpacity
}来自‘react-native’;
导出默认类App扩展组件{
render() {
return (
<查看样式= {styles.container}>
<TouchableOpacity
style = {styles.button}
onPress={() => {
this.displayModal（true）;
}}>
<文字样式= {styles.buttonText}>Show 模态</Text>
</TouchableOpacity>
</View>
);
}
};
const styles = StyleSheet.create（{
container: {
padding: 25,
flex: 1,
alignItems: ‘center’,
justifyContent: ‘center’,
},
button: {
display: ‘flex’,
height: 60,
borderRadius: 6,
justifyContent: ‘center’,
alignItems: ‘center’,
width: ‘100%’,
backgroundColor: ‘#2AC062’,
shadowColor: ‘#2AC062’,
shadowOpacity: 0.5,
shadowOffset: {
height: 10,
width: 0
},
shadowRadius: 25,
},
}）;
显示React Native 模态-
在下一步中，我们将学习如何在React Native中使用一些图像和文本内容实现简单模态。
为此，请再次打开App.js文件，并将以下代码放入其中。
// App.js
从导入React，{组件}‘react’;
导入{
View,
Text,
StyleSheet,
TouchableOpacity,
Image,
Modal
}来自‘react-native’;
导出默认类App扩展组件{
// initial state
state = {
isVisible: false
};
// hide show modal
displayModal(show){
this.setState（{isVisible：show}）
}
render() {
return (
<查看样式= {styles.container}>
<Modal
animationType = {“slide”}
transparent={false}
visible = {this.state.isVisible}
onRequestClose={() => {
Alert.alert(‘模态现已关闭。’);
}}>
<Image
source={require(‘./assets/scooby.jpeg’)}
样式= {styles.image} />
<文字样式= {styles.text}>
Lorem ipsum dolor坐下来，自私自利。
Maecenas得了tempus augue，一种回val的天鹅绒。</Text>
</Modal>
<TouchableOpacity
style = {styles.button}
onPress={() => {
this.displayModal（true）;
}}>
<文字样式= {styles.buttonText}>Show 模态</Text>
</TouchableOpacity>
</View>
);
}
};
const styles = StyleSheet.create（{
container: {
padding: 25,
flex: 1,
alignItems: ‘center’,
justifyContent: ‘center’,
},
button: {
display: ‘flex’,
height: 60,
borderRadius: 6,
justifyContent: ‘center’,
alignItems: ‘center’,
width: ‘100%’,
backgroundColor: ‘#2AC062’,
shadowColor: ‘#2AC062’,
shadowOpacity: 0.5,
shadowOffset: {
height: 10,
width: 0
},
shadowRadius: 25,
},
closeButton: {
display: ‘flex’,
height: 60,
borderRadius: 6,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#FF3974’,
shadowColor: ‘#2AC062’,
shadowOpacity: 0.5,
shadowOffset: {
height: 10,
width: 0
},
shadowRadius: 25,
},
buttonText: {
color: ‘#FFFFFF’,
fontSize: 22,
},
image: {
marginTop: 150,
marginBottom: 10,
width: ‘100%’,
height: 350,
},
text: {
fontSize: 24,
marginBottom: 30,
padding: 40,
}
}）;
通过这样做，我们导入了Modal组件以及文本和图像组件。我们定义了Modal的初始状态 displayModal（） 是一个将Modal状态设置为true（如果为false）的函数。
如您在上面看到的，我们需要将animation属性设置为 '滑动'。 此外，我们需要实现动画模态。我们还可以使用其他选项，例如‘fade’ and ‘ none’.
为了具有透明背景，请将透明属性设置为false。
我们在模式中显示图像和文本，并使用{styles.className}属性添加了组件的样式。
关闭React Native 模态 Popup。
接下来，我们将了解如何关闭React Native 模态。为此，我们将需要在下面的代码中添加以下代码：
<文字样式= {styles.closeText}
onPress={() => {
this.displayModal（！this.state.isVisible）;}
}> 封闭模态 </Text>
接下来，我们将为关闭按钮添加样式：
const styles = StyleSheet.create（{
closeText: {
fontSize: 24,
color: ‘#00479e’,
textAlign: ‘center’,
}
}）;
最后，我们将添加最终的App.js代码：
// App.js
从导入React，{组件}‘react’;
导入{
View,
Text,
StyleSheet,
TouchableOpacity,
Image,
Modal
}来自‘react-native’;
导出默认类App扩展组件{
// initial state
state = {
isVisible: false
};
// hide show modal
displayModal(show){
this.setState（{isVisible：show}）
}
render() {
return (
<查看样式= {styles.container}>
<Modal
animationType = {“slide”}
transparent={false}
visible = {this.state.isVisible}
onRequestClose={() => {
Alert.alert(‘模态现已关闭。’);
}}>
<Image
source={require(‘./assets/scooby.jpeg’)}
样式= {styles.image} />
<文字样式= {styles.text}>
Lorem ipsum dolor坐下来，自私自利。
Maecenas得了tempus augue，一种回val的天鹅绒。</Text>
<Text
style = {styles.closeText}
onPress={() => {
this.displayModal（！this.state.isVisible）;}}>Close 模态</Text>
</Modal>
<TouchableOpacity
style = {styles.button}
onPress={() => {
this.displayModal（true）;
}}>
<文字样式= {styles.buttonText}>Show 模态</Text>
</TouchableOpacity>
</View>
);
}
};
const styles = StyleSheet.create（{
container: {
padding: 25,
flex: 1,
alignItems: ‘center’,
justifyContent: ‘center’,
},
button: {
display: ‘flex’,
height: 60,
borderRadius: 6,
justifyContent: ‘center’,
alignItems: ‘center’,
width: ‘100%’,
backgroundColor: ‘#2AC062’,
shadowColor: ‘#2AC062’,
shadowOpacity: 0.5,
shadowOffset: {
height: 10,
width: 0
},
shadowRadius: 25,
},
closeButton: {
display: ‘flex’,
height: 60,
borderRadius: 6,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#FF3974’,
shadowColor: ‘#2AC062’,
shadowOpacity: 0.5,
shadowOffset: {
height: 10,
width: 0
},
shadowRadius: 25,
},
buttonText: {
color: ‘#FFFFFF’,
fontSize: 22,
},
image: {
marginTop: 150,
marginBottom: 10,
width: ‘100%’,
height: 350,
},
text: {
fontSize: 24,
marginBottom: 30,
padding: 40,
},
closeText: {
fontSize: 24,
color: ‘#00479e’,
textAlign: ‘center’,
}
}）;
反应原生基本模态
在模态可以观察到简单应用的情况下，模态的可感知性由某些组件的本地状态秘密处理。
该代码可以类似于以下内容：
类ModalDialog扩展了Component {
state = {
isConfirmed: false
};
SubmitEvent =值=> {
this.setState（{isConfirmed：true，value：value}）;
};
//当用户尝试确认模式弹出窗口中的选择时的处理程序
confirmEvent = () => {
// …
};
//当用户尝试取消确认模式弹出窗口时的处理程序
cancelEvent = () => {
this.setState（{isConfirmed：false}）;
};
render() {
const {isConfirmed} = this.state;
return (
<查看样式= {styles.container}>
{isConfirmed && <对话框onCancel = {this.cancelEvent} onConfirm = {this.confirmEvent} / >}
</View>
);
}
}
导出默认的ModalDialog;
结论：
综上所述，目前我们还知道如何通过使用一些数据在iOS和Android Apps中显示模式。此外，我们还学会了在React本机应用程序中显示和隐藏模式弹出窗口。此外，我们还专注于组件的基本样式。由于这个原因，我们使用了style.classname属性来获取React Native中的输出。
