小编anD*_*Dev的帖子

我有一个 React Native 应用程序，它有选项卡式布局。加载主屏幕时我需要调用一些函数。我尝试使用componentWillMount()函数，但它不起作用，因为我的屏幕是在函数中定义的，而不是在类中定义的。如何创建加载函数？

主屏.js

import React, { useState, Component } from 'react';
import { View, Text } from 'react-native';
import { getText } from '..components/getText';

export default function HomeScreen() {

  const [onLoadText, setText] = useState("");

  const onScreenLoad = () => {
    setText(getText());
  }

  const componentWillMount = () => {
    // Not working
    onScreenLoad();
  }

  return (
    <View style={styles.container}>
      <Text>{onLoadText}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

我的 React Native Android 应用程序需要将 JSON 文件保存在外部存储的特殊文件夹中。我尝试使用 RNFS ( https://github.com/itinance/react-native-fs ) 这样做：

const saveData = async () => {
    var path = `${RNFS.ExternalStorageDirectoryPath}/MyApp`;
    RNFS.mkdir(path);
    path += '/data.json';
    RNFS.writeFile(path, JSON.stringify(getData()), 'utf8')
      .then((success) => {
        console.log('Success');
      })
      .catch((err) => {
        console.log(err.message);
      });
  }

它运行良好，但在 Android Q 设备上失败。显示此错误：

Error: Directory could not be created

如果我尝试编写一个普通文件而不创建目录，则会抛出此错误：

ENOENT: open failed: ENOENT (No such file or directory), open '/storage/emulated/0/data.json'

但是，我已将此权限添加到我的AndroidManifest.xml：

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>

并在设置中授予外部存储权限。但如果我将其更改RNFS.ExternalStorageDirectoryPath为RNFS.DocumentDirectoryPath它，它就不会出现任何错误。但我需要访问外部存储。有什么办法可以做到吗？

我有一个包含两个项目的 FlatList。我需要用另一个元素附加这个列表。当用户单击按钮时，来自文本输入的数据应出现在 FlatList 的末尾。所以，我试图将数据对象推送到列表数组的末尾，但新项目取代了最后一个。

import React, { useState } from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';

export default function HomeScreen() {

  var initialElements = [
    { id : "0", text : "Object 1"},
    { id : "1", text : "Object 2"},
  ]

  const [exampleState, setExampleState] = useState(initialElements);
  const [idx, incr] = useState(2);

  const addElement = () => {
    var newArray = [...initialElements , {id : toString(idx), text: "Object " + …

我正在尝试通过必须从组件的道具获取的路径加载本地 JPG 图像。但是当我尝试这样做时，图像未加载，其 src 路径如下所示：

Module {default: "/ff5a7601c48dcb99c92acfca45eb2439.png", __esModule: true, Symbol(Symbol.toStringTag): "Module"}

但是当我使用 import 语句时，它输出正确的路径：

/fa8b72877658d9175b437ebb88e3ef2c.jpg

我不能使用导入，因为我需要获取组件主体中的路径。那么，如何正确加载文件？

有我的 JSX 组件：

import React from 'react';
import { Card } from 'react-bootstrap';

import '../../../resources/scss/style.scss';

class ArticleCard extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {

    const { article } = this.props;

    return (
      <Card>
        <Card.Img variant="top" src={require(article.imagePath)} />
        <Card.Body>
          <Card.Title>{article.title}</Card.Title>
          <Card.Text>{article.description}</Card.Text>
        </Card.Body>
      </Card>
    )
  }
}

export default ArticleCard;

和 webpack.config.js 片段：

{
   test: /\.(jpe?g|png|gif|svg|jpg)$/i,
   use: {
      loader: 'file-loader',
      options: {
         name: …