Logo

菜单

发布于 2026-01-06 2 阅读
0

Mi primera app con React Native DEV's Worldwide Show and Tell Challenge Presented by Mux: Pitch Your Projects!

Mi primera 应用程序与 React Native

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

React Native是一个针对 iOS 和 Android 的原生应用程序和 React 的框架。使用 React Native 的应用程序，首先使用 CLI（命令行），然后使用 React-Native，然后使用 CLI。

我们可以选择各种附加组件来构建 ReactNative 的一部分，以控制更多的原生 API，并允许在 iOS、Android 和 Web 上构建和部署应用程序。

在此教程中，我们将在博览会评论帖子中应用它。如果您需要使用初步选项，建议您在ReactNative官方文档中进行初始设置。

要求：

  • 节点
  • 纱
  • expo-cli ```sh

$ npm install -g expo-cli

  > Para este post tengo la versión 3.21.9
- **(Opcional)** Emuladores Android y iOS, es opcional ya que con expo puedes probar desde tu celular, debes instalarte expo en tu celular.

Para crear una aplicación, para este caso llamado `MyPostApp`, solo debes correr:

```sh


$ expo init MyPostApp
Enter fullscreen mode Exit fullscreen mode

Escoge empty template，请参阅白色页面。

Para ingresar al proyecto:



$ cd MyPostApp
Enter fullscreen mode Exit fullscreen mode

Para iniciar el proyecto:



$ yarn start
Enter fullscreen mode Exit fullscreen mode

世博会将 QR 码与移动应用程序结合起来。

请编辑您的应用程序，单独将其归档App.js。



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

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Open up App.js to start working on your app!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});
Enter fullscreen mode Exit fullscreen mode

Llamamos 是 ReactNative 的 3 个组件：

  • 查看：该组件代表 UI 中的基本内容，包括文本、图像、视频。比较网络相关内容，以了解更多礼仪。
  • 文本： Este componente se usa alone paramostrar texto o anidar etiquetas de texto。独奏礼仪与文本。
  • 样式表：这是一种 CSS 编写形式，可用于 CSS 样式表。

Listar帖子

Guardemos nuestros 的帖子是一个重要的时刻，你不会与数据基础上的互动。



const POSTS = [
  {
    id: 1,
    body:
      "In irure minim in pariatur nisi irure reprehenderit cupidatat. Consequat ea enim veniam Lorem id nulla proident aute.",
    createdAt: new Date(2020, 3, 15),
    author: "elizabeth",
  },
  {
    id: 2,
    body:
      "Nisi laborum ea ad sit exercitation eu incididunt elit nostrud excepteur irure enim. Magna do aliqua officia officia dolore ad proident. Occaecat cillum sit veniam ea nostrud deserunt duis cupidatat laboris enim nostrud deserunt ex non.",
    createdAt: new Date(2020, 5, 2),
    author: "elizabeth",
  },
  {
    id: 3,
    body:
      "Nulla Lorem Lorem occaecat laboris minim anim sit ea eiusmod. Sunt ea ex exercitation est veniam.",
    createdAt: new Date(2020, 5, 25),
    author: "emma",
  },
];
Enter fullscreen mode Exit fullscreen mode

Para renderizar listas con ReactNative, se usa FlatList esto props son las más básicos:

  • 数据：aquí se pasa nuestra estructura de datos
  • renderItem: 渲染组件，这是一个recibir itemcomo prop，conteniendo cada uno de los ementos de la lista
  • keyExtractor：Como es una lista、cada elemento debe tener un key


export default function App() {
  return (
    <View style={styles.container}>
      <FlatList
        data={POSTS}
        renderItem={({ item }) => <Text>{item.body}</Text>}
        keyExtractor={(post) => Number(post.id)}
      />
    </View>
  );
}
Enter fullscreen mode Exit fullscreen mode

在 iOS 上，您可以通过导入 StatusBar 来渲染应用程序，以便在SafeAreaView中使用。

Agreguemos un poco de estilos a nuestra lista de posts:
Primero crearemos un componente para el card de cada post:



// components/PostCard.js

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

export default function PostCard({ post }) {
  return (
    <View style={styles.postContainer}>
      <Text style={styles.postBody}>{post.body}</Text>
      <Text style={styles.postAuthor}>{post.author}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  postContainer: {
    backgroundColor: "#dfefff",
    marginHorizontal: 20,
    marginVertical: 8,
    borderWidth: 1,
    borderColor: "#d1dcdf",
    borderRadius: 5,
    padding: 10,
  },
  postBody: {
    fontSize: 16,
    color: "#292944",
  },
  postAuthor: {
    alignSelf: "flex-end",
    color: "#6e6e7e",
    fontSize: 14,
  }
});
Enter fullscreen mode Exit fullscreen mode

页面主要内容如下：



export default function App() {
  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.heading}>Posts List</Text>
      <FlatList
        data={POSTS}
        renderItem={({ item }) => <PostCard post={item} />}
        keyExtractor={post => post.body}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#b4cefe",
    alignItems: "center",
    justifyContent: "center",
  },
  heading: {
    color: "#292944",
    fontSize: 24,
    fontWeight: "600",
    marginTop: 20,
    marginBottom: 10,
  }
});
Enter fullscreen mode Exit fullscreen mode

添加帖子

在创建帖子时，请使用模态和公式。 Para esto, usaremos tres componentes nuevos:

  • TouchableOpacity： Es un componente que al presionarlo cambiará la opacidad。该组件包含许多其他组件。 Tendrá un prop onPressque recibe una función que se ejecutará cuando se presione el componente.
  • 模态：代表非模态的组件。这是visible您在莫斯特拉尔的住处或在您的视野中遇到的最重要的组成部分的原因。
  • 文本输入：代表文本输入的组件，特别是在特殊情况下的附加说明。

Primero Crearemos Nuestro Componente con el contenido del modal, el Formulario para agregar un nuevo post.这三个道具的组成部分，visible如果是模态的指示，setVisible则可以作为可见的新价值的功能，并setPosts编辑最初的帖子列表。

Para los valores del Formulario，tendremos 2 estados，身体和作者。 Para la UI, usaremos dos TextInputy un TouchableOpacity。 En el prop onChangeTextde los TextInputcambiaremos los valores de cada estado。对于身体来说，multiline勇敢的支持者true，就像勇敢的人，对身体的印象更多的是文本中的线条。 El TouchableOpacitylo usaremos para agregar un nuevo post a nuestra lista de posts y limpiar el valor de cada estado usado en el Formulario。



// components/NewPostModal.js

import React from "react";
import {
  Modal,
  View,
  TouchableOpacity,
  Text,
  TextInput,
  StyleSheet,
} from "react-native";

export default function NewPostModal({ visible, setVisible, setPosts }) {
  const [body, setBody] = React.useState("");
  const [author, setAuthor] = React.useState("");
  const createPost = () => {
    setPosts((posts) => [
      ...posts,
      { id: Date.now(), body, author, createdAt: Date.now() },
    ]);
    setBody("");
    setAuthor("");
    setVisible(false);
  };

  return (
    <Modal visible={visible} transparent={true}>
      <View style={styles.modalContainer}>
        <View style={styles.modalContent}>
          <TouchableOpacity onPress={() => setVisible(false)}>
            <View style={styles.closeButton}>
              <Text>X</Text>
            </View>
          </TouchableOpacity>
          <Text style={styles.title}>Nuevo post</Text>
          <View style={styles.inputGroup}>
            <TextInput
              placeholder="Body"
              style={[styles.textInput, { height: 35 }]}
              value={body}
              onChangeText={(text) => setBody(text)}
              multiline={true}
            />
          </View>
          <View style={styles.inputGroup}>
            <TextInput
              placeholder="Author"
              style={styles.textInput}
              value={author}
              onChangeText={(text) => setAuthor(text)}
            />
          </View>
          <TouchableOpacity
            onPress={() => createPost()}
            style={styles.createButton}
          >
            <Text>AGREGAR</Text>
          </TouchableOpacity>
        </View>
      </View>
    </Modal>
  );
}

const styles = StyleSheet.create({
  modalContainer: {
    backgroundColor: "rgba(0,0,0,0.8)",
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    paddingHorizontal: 25,
  },
  modalContent: {
    backgroundColor: "#fff",
    width: "100%",
    paddingHorizontal: 15,
    paddingVertical: 20,
  },
  closeButton: { alignSelf: "flex-end" },
  title: {
    fontSize: 20,
    textAlign: "center",
    marginBottom: 12,
  },
  inputGroup: { flexDirection: "row", marginVertical: 10 },
  textInput: {
    flex: 1,
    borderBottomWidth: 1,
    borderColor: "#b7b7b7",
    height: 24,
    paddingVertical: 4,
    paddingHorizontal: 5,
  },
  createButton: {
    alignSelf: "flex-end",
    borderWidth: 1,
    borderColor: "gray",
    paddingHorizontal: 20,
    paddingVertical: 5,
    marginTop: 15,
  },
});
Enter fullscreen mode Exit fullscreen mode

页面主体 (App.js) 的底部按钮是一个新的模式。帕拉埃斯托·乌萨雷莫斯联合国TouchableOpacity。



// App.js

export default function App() {
  const [modalVisible, setModalVisible] = React.useState(false);
  const [posts, setPosts] = React.useState(POSTS);

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.heading}>Posts List</Text>
      <FlatList
        data={posts}
        renderItem={({ item }) => <PostCard post={item} />}
        keyExtractor={(post) => post.body}
      />
      <TouchableOpacity onPress={() => setModalVisible(true)} style={styles.button}>
        <Text>Agregar post</Text>
      </TouchableOpacity>
      <NewPostModal visible={modalVisible} setVisible={setModalVisible} setPosts={setPosts} />
    </SafeAreaView>
  );
}
Enter fullscreen mode Exit fullscreen mode

与 ReactNative 相关的应用程序基本相同，与大多数帖子列表一样，我们在新列表中聚合了新帖子。

https://media3.giphy.com/media/SWXJVtISHVfzlbsaWM/giphy.gif

文章来源：https://dev.to/kattyacuevas/mi-primera-app-con-react-native-2hj4
CSS 日夜切换（仅 CSS/HT...
我是如何获得第一份开发人员工作的