在React Native上创建移动应用程序



大家好 这将是创建我们的移动应用程序的第一部分。

我们将使用react native和expo做一个移动应用程序。 我们不会创建好消息应用程序。 为此,我们将通过rest api使用php。

在我们的应用程序中,我们将显示phpmyadmin中的文章。

什么是博览会?


Expo是一组工具,库和服务,可让您使用JavaScript为iOS和Android创建自己的应用程序。 听起来很有希望。 简而言之,Expo可帮助您在仍在开发项目时查看它们。 Expo CLI将创建一个开发URL(类似于Internet上的本地主机),然后您可以在Expo Client中打开它以预览应用程序。

博览会安装


在安装expo之前,请确保安装npm。

npm install expo-cli —global 

在iPhone上安装EXPO

在Android上安装EXPO


世博会为您提供选择。 您可以通过移动设备上的Expo客户端应用程序或计算机上的iOS / Android模拟器预览应用程序。 创建应用程序时,我在android上使用了expo。

创建一个博览会应用程序


 epxo init 

安装Expo之后,会打开Expo CLI界面,并允许您选择项目名称和模板。 我们将选择一个空白页。

 cd newsApp expo start —tunnel 

之后,expo将启动本地开发服务器,打开一个用于查看服务器的新窗口,并为您提供QR码以在您的移动设备上打开您的项目。 或者,您可以在移动应用程序和expli cli中注册,它将自动显示移动应用程序中的最新动态。

要在计算机上输入expo,请使用以下命令:

 expo login 

安装反应导航


为了能够从一个屏幕切换到另一个屏幕,我们需要下载react-nativation:

 yarn add react-nativation 

开发开始


现在开始我们的开发。

我们要做的第一件事是打开App.js(我们的主文件)。

布局图


为了使我们的应用程序更具吸引力,我们将添加几个元素并为其添加样式。

首先,添加标题:

 render() { return ( <SafeAreaView style={styles.MainContainer}> <ScrollView > <Text style={styles.textTitle}>:</Text> </ScrollView> </SafeAreaView> ); } const styles = StyleSheet.create({ textTitle :{fontSize:22,fontFamily: 'Roboto-M',fontWeight:'700', padding:10}, }); 

现在,让我们添加一个带有商品输出的块并为其设置样式。

 import * as React from 'react'; import { View, Text, SafeAreaView, StyleSheet, Image, Dimensions, ScrollView } from 'react-native'; import Icon from 'react-native-vector-icons/Ionicons' export default class App extends React.Component { constructor(props) { super(props); this.state = { isLoading: true, fontLoaded: false } } async componentDidMount() { return fetch('http://rapprogtrain.com/server-side/test.php') .then((response) => response.json()) .then((responseJson) => { this.setState({ isLoading: false, dataSource: responseJson }, function() { // In this block you can do something with new state. }); }) .catch((error) => { console.error(error); }); } FlatListItemSeparator = () => { return ( <View /> ); } render() { return ( <SafeAreaView style={styles.MainContainer}> <ScrollView > <Text style={styles.textTitle}>:</Text> <View style={styles.postContainer}> <Image source = {{ uri: "https://tinyjpg.com/images/social/website.jpg" }} style={{resizeMode:'cover',width:null,height:null, flex:1, borderRadius:4, borderWidth:1, borderColor:'#dddddd'}} /> <Text style={styles.textOfArticle} > Lorem Ipsum is simply dummy text of the printing and typesetting industry. </Text> <View style={{marginTop:10, flexDirection: 'row', justifyContent: 'space-between'}}> <Text style={{color:'#727272',fontSize:13}}>Lorem</Text> <View style={{flexDirection: 'row'}}> <Icon name="ios-eye" size={18} style={{color:'#727272', marginRight:3}} /> <Text style={{color:'#727272',fontSize:13}}>22</Text> </View> </View> </View> </ScrollView> </SafeAreaView> ); } } const styles = StyleSheet.create({ MainContainer :{ // Setting up View inside content in Vertically center. justifyContent: 'center', flex:1 }, textTitle :{fontSize:22,fontFamily: 'Roboto-M',fontWeight:'700', padding:10}, textOfArticle:{ marginTop:7, fontSize:16, fontFamily: 'Roboto-M' }, postContainer :{ width: Dimensions.get('window').width, height:250, paddingBottom:10, padding:10 }, }); 

至此,我们的课程结束。

在下一课中,我们将输出mysql数据。

如果您对它的工作方式感兴趣,请去下载此应用程序,其中会有一个新闻标签- 移动应用程序

我的网站是http://rapprogtrain.com

vk推特

Source: https://habr.com/ru/post/zh-CN467609/


All Articles