React Native官方DEMO

官方给我们提供了UIExplorer项目,这里边包含React Native的基本所有组件的使用介绍和方法。

运行官方DEMO步骤如下

  • 安装react native环境
  • React Native项目源码下载
  • 下载安装cygwin软件
  • 下载安装NDK然后安装以及配置
  • 添加Node依赖模块:该命令行需要切到react-native项目中,主要运行如下命令
    cd react-native以及npm install(这里发生错误,是因为npm需要升级的缘故)
  • 还需要安装配置python2版本,python3不行
  • 开始编译官方实例UIExploerer项目
    打开之前安装的cygwin终端,切换到当前react-native项目中。注意切换路径方法以实际项目路径为准,运行以下命令
    ./gradlew :Examples:UIExplorer:android:app:installDebug
    需要下载很多东西,挺慢的,而且由于网络原因,经常会失败,多试几次才行
  • 接下来就是最关键的一步啦~执行如下命令进行打包启动服务.
    ./packager/packager.sh

References

windows版本编译运行react-native官方实例

效果如下

该DEMO包含了react native主要组件与API的实例

COMPONETS

  • ActivityIndicatorExample
  • SliderExample
  • ImageExample
  • ListViewExample等

AIPS

  • AccessibilityAndroidExample
  • AlertExample
  • AppStateExample
  • BorderExample

官方Movie实例

The Movies app is a demonstration of basic concepts, such as fetching data, rendering a list of data including images, and navigating between different screens.

Running this app

Before running the app, make sure you ran:

git clone https://github.com/facebook/react-native.git
cd react-native
npm install

Running on Android

You’ll need to have all the prerequisites (SDK, NDK) for Building React Native installed.

Start an Android emulator (Genymotion is recommended).

cd react-native
./gradlew :Examples:Movies:android:app:installDebug
./packager/packager.sh

Note: Building for the first time can take a while.

Open the Movies app in your emulator.

See Running on Device in case you want to use a physical device.

effect

这里写图片描述

当然可以!以下是一个简单的 React Native Demo 代码,用于创建一个简单的登录界面: ```javascript import React, { useState } from 'react'; import { View, TextInput, TouchableOpacity, Text, StyleSheet } from 'react-native'; const App = () => { const [username, setUsername] = useState(''); const [password, setPassword] = useState(''); const handleLogin = () => { // 在这里处理登录逻辑 console.log('登录:', username, password); }; return ( <View style={styles.container}> <TextInput style={styles.input} placeholder="用户名" value={username} onChangeText={(text) => setUsername(text)} /> <TextInput style={styles.input} placeholder="密码" secureTextEntry value={password} onChangeText={(text) => setPassword(text)} /> <TouchableOpacity style={styles.button} onPress={handleLogin}> <Text style={styles.buttonText}>登录</Text> </TouchableOpacity> </View> ); }; const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16, }, input: { width: '100%', height: 40, borderWidth: 1, borderColor: '#ccc', borderRadius: 4, marginBottom: 10, paddingLeft: 10, }, button: { width: '100%', height: 40, backgroundColor: 'blue', justifyContent: 'center', alignItems: 'center', borderRadius: 4, }, buttonText: { color: '#fff', fontSize: 16, fontWeight: 'bold', }, }); export default App; ``` 这是一个简单的登录界面,包含了用户名和密码的输入框,以及一个登录按钮。当点击登录按钮时,会在控制台打印出输入的用户名和密码。你可以根据自己的需求来扩展和修改这段代码。希望对你有帮助!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值