RN学习（1）-初识RN

培根大肉肉
276 阅读3分钟

简介

要使用 React Native，你需要对 React 基础知识有所了解。如果你是 React 新手或需要复习，你可以在官网和 react技术揭秘上学习下。

目标

  • 函数式组件

    • 你可以在 React 中使用函数式组件或 Class 组件。最开始只有 Class 组件能够使用 state ，但自从有了 React Hooks API, 你可以为函数组件添加 state 和很多其它的功能。
    • Hooks API 是 React Native 0.59 提供的新特性, Hooks 是一种面向未来的编写 React 组件的方式，因此我们在本文档中优先使用函数组件

  • RN0.72版本

    • 从 0.68 版本开始，React Native 提供了新架构，它为开发者提供了构建高性能和响应式应用的新功能。请访问"为何要设计新架构"来了解更多关于促使我们决定重新架构的原因，以及它提供的好处
    • 0.72版本
      • 因为受限于团队安卓端sdk，我们最终选择了RN72版本，本专栏只围绕着这个版本讲

image.png

具体实现

  • 核心组件与原生组件

    • React Native 是一个使用React和应用平台的原生功能来构建 Android 和 iOS 应用的开源框架。
    • 通过 React Native，您可以使用 JavaScript 来访问移动平台的 API，以及使用 React 组件来描述 UI 的外观和行为。
    • 但首先，让我们介绍一下组件在 React Native 中是如何工作的。

      • 视图（Views）与移动开发

        • 在 Android 和 iOS 开发中，一个视图是 UI 的基本组成部分：屏幕上的一个小矩形元素、可用于显示文本、图像或响应用户输入。甚至应用程序最小的视觉元素（例如一行文本或一个按钮）也都是各种视图。某些类型的视图可以包含其他视图。全部都是视图。

Android和iOS应用中多种视图的一些示例。

      • 原生组件

      • 在 Android 开发中是使用 Kotlin 或 Java 来编写视图；
      • 在 iOS 开发中是使用 Swift 或 Objective-C 来编写视图。
      • 在 React Native 中，
        • 则使用 React 组件通过 JavaScript 来调用这些视图。
        • 在运行时，React Native 为这些组件创建相应的 Android 和 iOS 视图。
        • 由于 React Native 组件就是对原生视图的封装，因此使用 React Native 编写的应用外观、感觉和性能与其他任何原生应用一样。
        • 我们将这些平台支持的组件称为原生组件。
        • React Native 允许您为 Android 和 iOS 构建自己的 Native Components（原生组件），以满足您开发应用程序的独特需求。官方还有一个由社区贡献的繁荣生态系统，可以到Native Directory来查找社区已创建的内容。

      • 核心组件

        • React Native 还包括一组基本的，随时可用的原生组件,核心组件有许多，从表单控件到活动指示器，应有尽有。你可以在API 章节找到它们。您将主要使用以下核心组件：

 

  • hook写法页面demo

    • dom
      • Text、View、ToastAndroid等核心组件
    • css
      • StyleSheet
      • css in js 的写法
import React, { useEffect, useState } from 'react';
import {
    Text,
    View,
    ToastAndroid,
    NativeModules, // 自定义的原生组件基本放在这里
    FlatList,
    StyleSheet,
    useColorScheme,
    SafeAreaView,
    ScrollView,
} from 'react-native'; // 核心组件
import {
    Colors,
} from 'react-native/Libraries/NewAppScreen';


const MyPage = () => {
    const [data, setData] = useState([]);
    // const navigation = useNavigation();
    const isDarkMode = useColorScheme() === 'dark';


    const backgroundStyle = {
        backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
    };


    useEffect(() => {
        const { customRequest } = NativeModules;
        const params = {};
        customRequest.request(api, params)
            .then(response => {
               setData(response)

            })
            .catch(error => {
                console.error('Error:', error);
                ToastAndroid.show("Error：" + error, ToastAndroid.SHORT)
            });
    }, []);
    const renderItem = ({ item }) => (
        <View style={styles.item}>
            <Text style={styles.title} numberOfLines={1}>xxx</Text>
        </View>
    );


    const keyExtractor = (item, index) => item.id + index;


    const pressItem = (data) => {
        // ToastAndroid.show(data, ToastAndroid.SHORT)
    }


    return (
        <SafeAreaView style={backgroundStyle}>
            <View style={styles.container}>
                <ScrollView
                    contentInsetAdjustmentBehavior="automatic"
                    style={backgroundStyle}>
                    {/* <Header /> */}
                    <FlatList
                        data={data}
                        renderItem={renderItem}
                        keyExtractor={keyExtractor}
                    />
                </ScrollView>


            </View>
        </SafeAreaView>
    );
};


const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff',
        height: 1000
    },
    item: {
        padding: 10,
        backgroundColor: '#fff',
    },
    title: {
        fontSize: 16,
        width: '90%',
        // overflow: 'hidden',
        // textOverflow: 'ellipsis',
        // whiteSpace: 'nowrap',
    },
    operation: {
        marginTop: 8,
        fontSize: 14,
        color: 'black',
    },
});


export default MyPage;
avatar
文章
阅读
粉丝