React Native 和 Expo FS 导入问题

Question

这一行： var a = require('react-native-fs');

返回以下错误： JSX 值应该是表达式或引用的 JSX 文本(53:22)

感谢您的帮助。

import React from 'react';
    import { 
        StyleSheet,
        View,
        Text,
        TextInput,
     } from 'react-native';
    export default class Component1 extends React.Component {
        constructor(props) {
            super(props);

            this.state = {
        textInputValue: "",
    }
}
render() {
    if (!this.props.visible) {
        return false;
    }     
    return (

        <View 
            style={styles.component}
        >
            <View style={styles.layouts}>
                <View style={styles.layout1}>
                    <View style={styles.itemcontainer1}>
                        <View style={styles.itemcontainer1Inner}>
                            <View style={styles.item1}>
                                    <TextInput 
                                        style={styles.item1TextInput}
                                        placeholder={"b"}
                                        underlineColorAndroid={"transparent"}
                                        placeholderTextColor={"rgba(0,0,0,1)"}
                                        onChangeText={(val) => this.setState({ textInputValue: val })}
                                        value={this.state.textInputValue}
                                        var a = require"react-native-fs";
                                        var path = a.DocumentDirectoryPath + '../textfile.txt';
                                        a.writeFile(path, this.state.textInputValue, 'utf8');
                                            .then((success) => {
                                                console.log('File Written');

Answer 1

JSX 是 React 应用程序常用的 javascript 扩展。它看起来类似于 html 标记，在元素的开头和结尾都有尖括号，以及这些元素的属性。如果你想把普通的 javascript 放在 JSX 中，你可以使用大括号来实现。你有这样的例子，比如这个，它有一些用于视图的 JSX，然后切换回 javascript 以传递 styles.layouts：

<View style={styles.layouts}>

您收到错误是因为您将 javascript 代码放在随机位置，而没有使用大括号。省略了一些额外的东西，你写道：

<TextInput var a = require ("react-native-fs");

这不是有效的 JSX，因为您没有使用大括号切换回 javascript。此外，这不是执行异步操作（例如写入磁盘）的正确位置。 render 方法是一个同步代码块，它获取组件的当前状态，并返回对您希望屏幕外观的描述。

将此代码放在何处取决于您要执行的操作。如果这是您希望在首次创建组件时发生的事情，那么您需要将代码放在 componentDidMount 中，这是一个函数，React 组件可以让它们在首次挂载时运行代码。例如：

import fs from 'react-native-fs';

export default class Component1 extends React.Component {
  componentDidMount() {
    var path = fs.DocumentDirectoryPath + '../textfile.txt';
    fs.writeFile(path, this.state.textInputValue, 'utf8')
        .then((success) => {
            console.log('File Written');
            // Possibly call this.setState if you want Component1 to render with something different now that the write is complete
        })
  }

  render() {
    // similar render to before, but without the file system code
  }
}

或者如果这段代码应该在他们点击按钮时运行，你可以这样做：

onButtonPressed() {
    var path = fs.DocumentDirectoryPath + '../textfile.txt';
    fs.writeFile(path, this.state.textInputValue, 'utf8')
    //etc
}

render() {
  return (
    // other components omitted for brevity
    <Button onPress={() => this.onButtonPressed()}/>
  )
}