0

我是相当新的反应，我正在编写一个应用程序，将文本字符串格式化为看起来有点像 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
4

1 回答 1

0

我没有看第二个代码，但我从第一个示例中猜到了问题所在。标题 编辑器和正文未定义。可能是范围界定问题。

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

于 2017-04-19T18:00:32.173 回答