Реактивный выпуск Native и Expo FS - PullRequest
Новая
       4

Реактивный выпуск Native и Expo FS

0 голосов
/ 07 декабря 2018

Эта строка: var a = require ('act-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');

1 Ответ

0 голосов
/ 07 декабря 2018

JSX является расширением javascript, обычно используемым приложениями реагирования.Он похож на теги html, с угловыми скобками в начале и конце элементов и свойствами этих элементов.Если вы хотите поместить обычный Javascript в JSX, вы можете сделать это с помощью фигурных скобок.У вас есть примеры этого, такие как этот, который имеет некоторый JSX для View, затем переключается обратно на javascript для передачи styles.layouts: 

<View style={styles.layouts}>

Вы получаете ошибку, потому что выположить код JavaScript в случайном месте, без использования фигурных скобок.Оставляя некоторые из дополнительных вещей, вы написали: 

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

Что не является допустимым JSX, поскольку вы не использовали фигурные скобки для переключения обратно на javascript.Кроме того, это не подходящее место для асинхронных операций, таких как запись на диск.Метод рендеринга - это синхронный блок кода, который принимает текущее состояние компонента и возвращает описание того, как должен выглядеть экран.

Где разместить этот код, зависит от того, что вы пытаетесь сделать.Если вы хотите, чтобы это происходило при первом создании компонента, вам нужно поместить код в componentDidMount, который является функцией, которая реагирует на компоненты, которые могут позволить им запускать код при первом монтировании.Например: 

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()}/>
  )
}
...