学习React Native时无需具备React经验

尽管我从未使用过React，但由于决定使用React Native，我将努力学习。

请记录我查看公式文档时的备注。

（由于这只是个便笺，所以非常轻松、随意、飘忽不定）

明白程度

我几乎没碰过React，但是我对Vue.js比较熟悉。

我非常喜欢 JavaScript

我会在YouTube上看React的视频，所以对术语有一些模糊的了解。

React Native 是什么

只需要一种选项：可以使用React编写跨平台的应用程序。

最终似乎会变成Swift、Kotlin、HtmlCss之类的东西。

最近流行的Flutter最大的不同之处似乎是它是使用原生UI还是独特的UI。

用ReactNative编写的应用在iOS、Android和浏览器上，每个平台的组件外观都不同。

那就是必须要全部进行测试吗？

请参考

Docs

仅凭浏览这个「基础知识」部分，你就能对它有一种大致的理解感觉。

由于介绍了组件的编写方式，包括函数和类的写法，这对我来说非常有帮助。

网络文章经常只是针对某个特定的群体或类别。

源自官方文档的引用

基本用法

import React from "react";
import { Text, View } from "react-native";

const YourApp = () => {
    return (
        <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
            <Text>Try editing me! ?</Text>
        </View>
    );
};

export default YourApp;

这帮家伙是什么意思！

React Native 提供的组件

如果在这里找的话，可以找到各种东西。

作为基本的事物进行介绍的那些东西

• View

とりあえずこれ書いとけばいい感じに見た目を調整してくれるらしい

我根本不知道React的寫法。

不要说什么先从 React 学起来什么的那样的话给那种人听…

这个页面大体上的利用

JSX(JavaScript XML)是一种用于构建React应用程序的JavaScript语法扩展。

在Vue.js中，可以将多个组件放置在一个文件中。

• template に html

 

• script に js

 

style に css

只要用一種方式重新遣詞， 據說React是用純JS編寫的。

因为是用JavaScript编写的，所以当然可以像这样使用变量。

const Cat = () => {
    const name = "Maru";
    return <Text>Hello, I am {name}!</Text>;
};

可以将函数赋值给变量。

const getFullName = (firstName, secondName, thirdName) => {
    return firstName + " " + secondName + " " + thirdName;
};

const Cat = () => {
    return <Text>Hello, I am {getFullName("Rum", "Tum", "Tugger")}!</Text>;
};

试了很多东西后，我有一个想法…

在写作业或论文时，可以在同一个文档内完成写作非常方便。

在使用Vue时，可以使用v-if和v-for来控制模板的显示与循环，但是模板会变得复杂，并且有时无法如所期望地运行。

React 是一个纯 JavaScript 的框架，因此具有很高的通用性。

const Cat = ({ name }) => {
    if (name) {
        return <Text>Hello, I am {name}!</Text>;
    } else {
        return <Text>I am a cat. I don't have a name yet.</Text>;
    }
};

还可以使用三元运算符。

const Cat = ({ name }) => {
    return name ? <Text>Hello, I am {name}!</Text> : <Text>I am a cat. I don't have a name yet.</Text>;
};

然而，看起来无法在return()中的{}中编写if或for之类的语法。

在那个时候，可以使用函数如下。

const CatCaffe = () => {
    const cats = ["mugi", "sora", "reo", "koko"];
    return (
        <View>
            {cats.map((cat) => {
                return <Text key={cat}>Hello, I am {cat}!</Text>;
            })}
        </View>
    );
};

如果随心所欲地去做的话，似乎会变得一团糟。

在任何事情中，保持平衡是非常重要的。

等一下我会去调查

这个 return 返回的是什么呢… 因为没有用引号括起来，所以似乎不是字符串。

独自制作组件

↑这只猫是一个函数，但也可以将它在其他函数中重复利用。

const Cat = () => {
    return (
        <View>
            <Text>I am also a cat!</Text>
        </View>
    );
};

const Cafe = () => {
    return (
        <View>
            <Text>Welcome!</Text>
            <Cat />
            <Cat />
            <Cat />
        </View>
    );
};

道具

当向子组件传递信息时，应将其作为函数参数从父组件传递给子组件。

引数的名称可以是任何东西，但是在推荐的情况下使用props似乎是最好的选择。

const Cat = (props) => {
    return (
        <View>
            <Text>Hello, I am {props.name}!</Text>
        </View>
    );
};

const Cafe = () => {
    return (
        <View>
            <Cat name="Maru" />
            <Cat name="Jellylorum" />
            <Cat name="Spot" />
        </View>
    );
};

陈述

当想要检测状态的变化时，可以使用State。

在 Vue.js 中，相当于 computed ？

我在评论中得到了指出，这更接近于数据，就像是在组件内拥有自己的东西。官方的钩子快速入门很容易理解。

虽然函数组件和类组件的写法不同，但暂时推荐使用函数组件。

函数组件的写法被称为 Hooks（钩子）。

写成一个句子就可以使用变量和设置器，非常方便！

import React, { useState } from "react";

const Cat = (props) => {
    const [isHungry, setIsHungry] = useState(true);

    return (
        <View>
            <Text>
                I am {props.name}, and I am {isHungry ? "hungry" : "full"}!
            </Text>
            <Button
                onPress={() => {
                    setIsHungry(false);
                }}
                disabled={!isHungry}
                title={isHungry ? "Pour me some milk, please!" : "Thank you!"}
            />
        </View>
    );
};

（只需要一个选项）：碎片

因为看到这段注释，我觉得嗯，还是写一下。

const Cafe = () => {
    return (
        <>
            <Cat name="Munkustrap" />
            <Cat name="Spot" />
        </>
    );
};

之前一直用包裹着，突然出现了<></>

如果一个组件必须被一个元素包围，那么每次都需要写上 View 这个标签吗？

只要用这个符号包围起来，暂时应该是可以的。

ScrollView 的注意事项

只需要一个选项

只需使用这个工具就可以轻松实现滚动。

不过……由于需要渲染整个屏幕之外的物体，导致性能不佳似乎。

如果项目列表太长，就可以使用FlatList。

列表显示

通过在 FlatList 中传递 data 和 renderItem 参数可以显示列表。

如果有很多数据，似乎用这个比ScrollView更好。

const FlatListBasics = () => {
    const data = [
        { key: 1, value: "Devin" },
        { key: 2, value: "Dan" },
        { key: 3, value: "Dominic" },
    ];

    return (
        <View style={styles.container}>
            <FlatList
                data={data}
                renderItem={({ item }) => (
                    <Text style={styles.item}>
                        {item.key}:{item.value}
                    </Text>
                )}
            />
        </View>
    );
};

风格的写作方式 de

从SectionList的例子中选取

StyleSheet在react-native中就像是一个模块。

import { SectionList, StyleSheet, Text, View } from "react-native";

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingTop: 22,
    },
    sectionHeader: {
        paddingTop: 2,
        paddingLeft: 10,
        paddingRight: 10,
        paddingBottom: 2,
        fontSize: 14,
        fontWeight: "bold",
        backgroundColor: "rgba(247,247,247,1.0)",
    },
    item: {
        padding: 10,
        fontSize: 18,
        height: 44,
    },
});

const SectionListBasics = () => {
    return (
        <View style={styles.container}>
            <SectionList
                sections={sections}
                renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
                renderSectionHeader={({ section }) => <Text style={styles.sectionHeader}>{section.title}</Text>}
                keyExtractor={(item, index) => index}
            />
        </View>
    );
};

在Vue.js的类绑定中，如果使用普通的CSS，注意font-size变为了fontSize。

在中文中，所有的样式都可以使用 JavaScript 来编写，这对于喜欢 JavaScript 的人来说是非常令人高兴的。

我觉得tailwindcss和其他一些东西很搭配。

在React Native中，是否可以使用React的UI组件呢……

我喜欢Material-UI的外观。

总结

在ReactNative中，有很多不同的组件可供使用。

据说使用它可以轻松创建适配各个平台的用户界面。

而且，React的JSX不仅限于UI的描述，还可以进行各种操作，因为它是基于JavaScript的。

用Vue.js学到的东西可以很好地应用，并且基于此可以轻松创建一个多平台应用，真是神奇！

从现在开始，我会认真学习。

无关紧要的话题

一年前，我对朋友说：“我开始学习React Native了”，给他发了一条LINE消息。

然后正好一年后，她又发了一条信息：“我开始学习ReactNative了。”

一次失利的事情被发现了。(Yī cì de .)