Question

我很反应，我正在编写一个应用程序，它将一串文本格式化，看起来有点像IOS上的文本消息（请参阅我的渲染函数，我的意思）。这是代码......

import React, { Component } from 'react';

import {
  TouchableOpacity,
  TouchableHighlight,
  StyleSheet,
  ScrollView,
  Image,
  Alert,
  Text,
  TextInput,
  View,
} from 'react-native';

import styles from './styles';
import SearchBar from 'react-native-search-bar';
import Group from './Group';

var data;
var title="";
var editor="";
var body="";
var number = 0;

class Document extends Component {
// Initialize the hardcoded data

constructor(props) {
  super(props);
  this.state = {
    name: ''
  };

  data="";
  title="";
  editor="";
  body="";
  number=0;

  data = props.data;

  for(let i = 0; i < data.length; i++){
      var char = data[i];

      if(char == "\n"){
        number+=1;
      }else{
        if(number==0){
            title+= char;
        }

        if(number==2){
          editor+=char;
        }

        if(number>=4){
          body+=char;
        }
      }
  }
}

render() {
    return(
      <View style = {{backgroundColor: 'white'}}>
        <Text style = {{fontSize: 16, marginBottom: 2,}}>{title}</Text>
        <Text style = {{fontSize: 14, marginBottom: 2,}}>{editor}</Text>
        <Text style = {{fontSize: 12, marginBottom: 2, color: 'grey'}}>{body}</Text>
      </View>
    )
}
}

export default Document

这个组件是另一个组件的一部分，它有其他元素，如搜索栏，组部分，以及我自己实现的导航项。

当我导航到包含此组件的视图时，组件不显示。从字面上看，没什但是，如果我离开该部分，然后回到它，一切都按预期呈现。我想知道为什么会这样？

注意：如果我添加一个简单的

<Text>Hello</Text>

作为视图部分中的唯一元素，它按预期呈现。

注2：为可怕的代码提前道歉，我一直在努力让这一切发挥作用。

很抱歉，如果我没有解释得这么好，但任何帮助都将受到大力赞赏

编辑：家长补充

import React, { Component } from 'react';

import {
  TouchableOpacity,
  TouchableHighlight,
  StyleSheet,
  ScrollView,
  Image,
  Alert,
  Text,
  TextInput,
  View,
} from 'react-native';

import styles from './styles';
import SearchBar from 'react-native-search-bar';
import Document from './Document';
import RNFetchBlob from 'react-native-fetch-blob';

var documents = [];
var number = 0;
var data = '';
var base64 = require('base-64');
var files = ["test.txt", "testTwo.txt"]

class Group extends Component {
// Initialize the hardcoded data

constructor(props) {
    super(props);
    this.state = {
      name: ''
    };

    this._readFile('test.txt');
}

_readFile(name){
  RNFetchBlob.fs.readStream(
    '/Users/XXXXXX/XXXX/documents/' + name,
    'base64',
    4095)
  .then((ifstream) => {
    ifstream.open()
    ifstream.onData((chunk) => {
      data = chunk
    })

    ifstream.onError((err) => {
      console.log('oops', err)
    })

    ifstream.onEnd(() => {
      this._decodeData()
    })
  })
}

_writeFile(value){
  RNFetchBlob.fs.writeFile(
    '/Users/XXXX/XXXX/documents/testTwo.txt',
    RNFetchBlob.base64.encode(value),
    'base64')
  .then(()=>{
    console.log('success!')
  })
}

_decodeData(){
  data = base64.decode(data)
}


render(){
    return (
        <View>
        <Document data = {data}></Document>
        </View>
    )
}
}

export default Group

Answer 1

我没看第二个代码，但我从第一个样本中猜到了问题是什么。未定义标题 编辑器和正文。可能是一个范围问题。

我认为你应该在构造函数中定义这些变量，比如this.title ='stuff'，然后在渲染调用中将它们称为{this.title}。

组件构造函数未正确调用

1 个答案: