dynamic更改文本输出 – 反应原生

每当我的服务器更新时,如何更新我的文本/图像。

我想要发生的事情

  1. 服务器向数据库添加文本
  2. 使用Web套接字的服务器消息RN应用程序
  3. RN应用程序从服务器请求数据
  4. 服务器从数据库请求数据
  5. 服务器将数据发送到RN应用程序
  6. RN应用程序用新数据更新<ScrollView>

发生了什么事

  1. 服务器向数据库添加文本
  2. 使用Web套接字的服务器消息RN应用程序
  3. RN应用程序从服务器请求数据
  4. 服务器从数据库请求数据
  5. 服务器将数据发送到RN应用程序

注:我知道服务器将正确的数据发送到RN应用程序,并且应用程序接收数据。 我有console.log编辑它。

数据

以下是从服务器发送到RN应用程序的数据示例:

 [ { _id: 592f7a5c74376a749e2db211, name: 'world', allowedUsers: [ '114135152003891444692', '114135152003891444692' ], firstUser: '114135152003891444692', imageSrcList: [ 'hello world', 'hello moon', '', 'images/WedMay31201720:38:57GMT-0700(PDT)MILI1496288337083myUserName.jpg' ] }, { _id: 592f8bf462d68f777dd47cfb, name: 'hello', allowedUsers: [ '114135152003891444692', '114135152003891444692' ], firstUser: '114135152003891444692', imageSrcList: [ 'foo', 'bar', '', 'images/WedMay31201720:39:01GMT-0700(PDT)MILI1496288341061myUserName.jpg' ] } ] 

它由一组对象组成。

每个对象包括:

  • _id唯一的标识符
  • name个人的名字,它可以被复制
  • allowedUsers和允许的用户数组
  • 首先用户第一个用户 – 和启动“池”的用户
  • imageSrcList这包括图像和聊天消息的URL,这是我需要帮助的地方。

我想如何解释这些数据。

每个“池”是上述数组中的一个对象。 我想让应用程序显示所有的“聊天”文本,并在用户点击“池”时从imageSrcList显示图像。

它应该如何去做这件事

(在我看来 – 如果你知道一个更好的方式通过分享!)

  1. 通过数组sortingfind正确的“池”
  2. imageSrcList每个元素进行sorting,以查找哪些是照片,哪些是聊天消息。
  3. 添加必要的JSX代码(例如<Text><Image/>
  4. 推到一个输出数组
  5. <ScrollView>显示输出数组

当前解决scheme

此解决scheme不起作用,但它应该可以帮助您了解我正在尝试执行的操作。

 loadData(cb) { fetch('http://localhost:8000/home/' + this.state.user.id) .then((response) => response.json()) .then((responseText) => { console.log('done laoding inicial data: '); console.log(responseText.pools); console.log(this.props.navigation.state.params._id); cb(responseText.pools) }) .catch((error) => { this.setState({ myValues: error, loaded: true, }); }); } 

…和

 ws.onmessage = (e) => { console.log('MESSAGE'); this.loadData(function(listObj){ for (var i = 0; i < list.length; i++) { if (listObj[i]._id === params._id){ params.list = listObj[i].imageSrcList; console.log(listObj[i].imageSrcList); } } list = params.list; output = []; for (var i = 0; i < list.length; i++) { if ( (typeof list[i] === 'string') && (list[i].includes('.jpg')) ){ output.push(<Image style={styles.preview} source={{uri: 'http://localhost:8000/' + list[i] }} />); }else if( typeof list[i] === null ){ output.push(); }else if ( list[i] === ''){ output.push() }else{ output.push(<Text>{list[i]}</Text>); } } }); }; 

…和

 <ScrollView ref={ref => this.scrollView = ref} onContentSizeChange={(contentWidth, contentHeight)=>{ this.scrollView.scrollToEnd({animated: true}); }}>{output}</ScrollView> 

更多信息

  • 我正在使用React Native
  • 我正在使用IOS
  • 我正在使用NodeJS / Express作为服务器

做这个工作的另一种方法是:

1)将loadData的响应保存到状态

 loadData(cb) { fetch('http://localhost:8000/home/' + this.state.user.id) .then((response) => response.json()) .then((responseText) => { this.setState({ pools: responseText.pools, loaded: true }); }) .catch((error) => { this.setState({ myValues: error, loaded: true, }); }); } 

2)创build一个_renderTools方法:

 _renderPools() { const output = []; // The data from the server can be accessed using this.state.pools // Do your magic stuff here and populate output with <Text> elements return output; } 

3)在你的参考输出render方法:

 render() { return ( <View> {this._renderPools()} </View> ); }