保持联系
印度班加罗尔
[电子邮件 protected]
电话:+91 8919786847
工作查询
[电子邮件 protected]
电话:+91 8919786847

关于React Native模型的一切

反应本机 模态:简介

模态是一个预定义的组件,可帮助我们创建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中的输出。

 

作者头像
QuikieApps
//www.qinheli.com.cn/blog

发表评论

您的电子邮件地址不会被公开。 必需的地方已做标记 *

我们使用cookie为您提供最佳体验。