React Native Apple App of the Day动画第一部分：设置UI

最新推荐文章于 2024-10-01 09:29:45 发布

dfsgwe1231

最新推荐文章于 2024-10-01 09:29:45 发布

阅读量96

点赞数

文章标签： java vue python css opencv ViewUI

原文链接：https://hackernoon.com/react-native-apple-app-of-the-day-animation-1-setup-ui-it1xo321p

版权

在本教程中，我们将以复制当前的Apple应用为例来创建React Native共享元素过渡。本教程将解决使用React Animation和Dimensions使图像看起来很酷的有趣方面。在这里，我们将不使用任何外部react插件。所有必需的组件（例如图像，动画，尺寸）均由react-native包提供。本教程的灵感来自React本机电子商务模板

[在这里阅读第二部分]

[在这里阅读第三部分]

这个想法是从简单的React Native项目开始的。然后，我们将添加图像并将图像与react-native包中的不同组件包装在一起，并将其配置为实现react-native共享元素转换。

所以，让我们开始吧！

从一个空项目开始

首先，我们将创建一个启动样板React Native应用程序。为此，我们需要在所需目录中运行以下命令：

>>react-native init <example-app>

在完成空白的react-native应用程序的安装后，我们将使用以下命令在iOS模拟器中运行该应用程序：

>>>react-native run-ios

结果，我们将在模拟器屏幕中获得以下结果：

添加映像并对其进行配置

现在，我们将图像添加到我们的应用程序。为此，我们需要从App.js文件中删除所有不必要的代码。然后，我们需要将以下代码添加到App.js文件中。图像从图像目录中导入。我们可以在项目源目录中创建自己的图像目录，添加自己的图像，然后将它们导入数组常量，如下面的代码片段所示：

import React from 'react' ;
import {View} from 'react-native' ;

const images = [
  { id : 1 , src : require ( './image/1.jpeg' )},
  { id : 2 , src : require ( './image/2.jpeg' )},
  { id : 3 , src : require ( './image/3.jpeg' )},
  { id : 4 , src : require ( './image/4.jpeg' )},
];
export default class App extends React . Component  {
  render() {
    return < View > </ View > ;
  }
}

在上面的代码段中，我们只包括了react-native包中的images常量和一个View组件。因此，如果我们重新运行该应用程序，它将在模拟器中显示为空白。

因此，为了将导入的图像添加到屏幕中，我们将用ScrollView组件替换View组件，以便我们可以通过上下滚动屏幕来查看屏幕上的图像。然后，我们将使用map函数将图像映射到屏幕上，该函数可帮助我们遍历数组并返回JSX元素。在这里，我们从map函数返回的元素是Image组件，其中集成了导入的图像。为此，我们可以使用以下代码片段中提供的代码：

import React from 'react' ;
import {Image, ScrollView} from 'react-native' ;

const images = [
  { id : 1 , src : require ( './image/1.jpeg' )},
  { id : 2 , src : require ( './image/2.jpeg' )},
  { id : 3 , src : require ( './image/3.jpeg' )},
  { id : 4 , src : require ( './image/4.jpeg' )},
];
export default class App extends React . Component  {
  render() {
    return (
      < ScrollView style = {{flex: 1 }}>
        {images.map(image => {
          return  <Image key={image.id} source={image.src} />;
        })}
      </ScrollView> 
    );
  }
}

结果，我们将在模拟器中获得以下屏幕：

正如我们在上面的仿真器仿真中看到的那样，图像出现在屏幕上，因此可以滚动。

包装图像

下一步是使用TouchableWithOutFeedBack和Animated View组件包装Image组件，以便在触摸时创建动画。 TouchableWithOutFeedBack组件用于使图像可单击，而无需在屏幕上提供任何反馈，而Animated View组件使图像具有适当的视图动画效果。因此，下面的代码片段中提供了实现此目的的代码：

import React from 'react' ;
import {
  Image,
  ScrollView,
  TouchableWithoutFeedback,
  Animated,
} from 'react-native' ;

const images = [
  { id : 1 , src : require ( './image/1.jpeg' )},
  { id : 2 , src : require ( './image/2.jpeg' )},
  { id : 3 , src : require ( './image/3.jpeg' )},
  { id : 4 , src : require ( './image/4.jpeg' )},
];
export default class App extends React . Component  {
  render() {
    return (
      < ScrollView style = {{flex: 1 }}>
        {images.map(image => {
          return (
             <TouchableWithoutFeedback key={image.id}>
              <Animated.View>
                <Image source={image.src} />
              </Animated.View>
            </TouchableWithoutFeedback>
          );
        })}
      </ScrollView>
    );
  }
}

将尺寸配置添加到带有尺寸组件的图像

在此步骤中，我们将根据屏幕尺寸配置图像的高度和宽度。为了获得屏幕的高度和宽度，我们将使用react-native软件包提供的Dimensions组件。 Dimensions组件提供了get（）函数，通过该函数我们可以获取全屏窗口的宽度和高度。在这里，我们将这些屏幕窗口的高度和宽度存储到两个变量中，即SCREEN_WIDTH和SCREEN_HEIGHT ，如下面的代码片段所示：

Image,
  ScrollView,
  TouchableWithoutFeedback,
  Animated,
  Dimensions,
}from 'react-native' ;
let SCREEN_WIDTH = Dimensions.get( 'window' ).width;
let SCREEN_HEIGHT = Dimensions.get( 'window' ).height;

然后，我们将这些尺寸样式配置添加到Animated View组件中，高度降低了150，如下面的代码片段所示：

<TouchableWithoutFeedback key={image.id}>< Animated.View
               style = {{
                 height: SCREEN_HEIGHT - 150 ,
                 width: SCREEN_WIDTH ,
                 padding: 15 ,
               }}>
           <Image source={image.src} />
     </Animated.View>
</TouchableWithoutFeedback>

因此，我们在模拟器屏幕上得到以下结果：

向图像添加样式

这一步很简单。我们只是将一些内联样式添加到Image组件中，以使其看起来更具吸引力。我们将使用样式属性添加内联样式，如下面的代码片段所示：

<TouchableWithoutFeedback key={image.id}>< Animated.View
               style = {{
                 height: SCREEN_HEIGHT - 150 ,
                 width: SCREEN_WIDTH ,
                 padding: 15 ,
               }}>
                <Image
                 source={image.src}
                 style={{
                   flex: 1,
                   height: null,
                   width: null,
                   resizeMode: 'cover',
                   borderRadius: 20,
                 }}
               />
             </Animated.View>
</TouchableWithoutFeedback>

因此，我们在模拟器屏幕上获得了以下结果，其中图像看起来比以前更好。

但是，正如我们所看到的，模拟器的状态栏覆盖在应用程序的图像上。

因此，为了解决此问题，我们将添加一个SafeAreaView容器。 SafeAreaView组件的功能是在设备的安全区域边界内呈现内容。因此，我们将用SafeAreaView组件包装ScrollView组件，如下面的代码片段所示：

import React from 'react' ;
import {
  Image,
  ScrollView,
  TouchableWithoutFeedback,
  Animated,
  Dimensions,
  SafeAreaView,
} from 'react-native' ;

const images = [
  { id : 1 , src : require ( './image/1.jpeg' )},
  { id : 2 , src : require ( './image/2.jpeg' )},
  { id : 3 , src : require ( './image/3.jpeg' )},
  { id : 4 , src : require ( './image/4.jpeg' )},
];
let SCREEN_WIDTH = Dimensions.get( 'window' ).width;
let SCREEN_HEIGHT = Dimensions.get( 'window' ).height;
export default class App extends React . Component  {
  render() {
    return (
      < SafeAreaView style = {{flex: 1 }}>
         <ScrollView style={{flex: 1}}>
          {images.map(image => {
            return (
              <TouchableWithoutFeedback key={image.id}>
                <Animated.View
                  style={{
                    height: SCREEN_HEIGHT - 150,
                    width: SCREEN_WIDTH,
                    padding: 15,
                  }}>
                  <Image
                    source={image.src}
                    style={{
                      flex: 1,
                      height: null,
                      width: null,
                      resizeMode: 'cover',
                      borderRadius: 20,
                    }}
                  />
                </Animated.View>
              </TouchableWithoutFeedback>
            );
          })}
        </ScrollView>
      </SafeAreaView>
    );
  }
}

因此，我们在模拟器屏幕上得到以下结果：

最后，我们的React Native共享元素过渡实现成功。

结论

在本教程的第一部分中，我们学习了如何设置空白的react native应用程序。我们还学习了如何使用本机包中的不同组件。此外，我们还获得了有关如何为动画设置图像UI以及如何使用Dimensions，ScrollView和SafeAriaView组件的详细指南。最后，我们成功完成了React Native共享元素过渡的实现。