
大家好 这将是创建我们的移动应用程序的第一部分。
我们将使用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() {
至此,我们的课程结束。
在下一课中,我们将输出mysql数据。
如果您对它的工作方式感兴趣,请去下载此应用程序,其中会有一个新闻标签-
移动应用程序我的网站是
http://rapprogtrain.com我
vk和
推特