dynamic更改文本输出 – 反应原生
题
每当我的服务器更新时,如何更新我的文本/图像。
我想要发生的事情
- 服务器向数据库添加文本
- 使用Web套接字的服务器消息RN应用程序
- RN应用程序从服务器请求数据
- 服务器从数据库请求数据
- 服务器将数据发送到RN应用程序
- RN应用程序用新数据更新
<ScrollView>
发生了什么事
- 服务器向数据库添加文本
- 使用Web套接字的服务器消息RN应用程序
- RN应用程序从服务器请求数据
- 服务器从数据库请求数据
- 服务器将数据发送到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
显示图像。
它应该如何去做这件事
(在我看来 – 如果你知道一个更好的方式通过分享!)
- 通过数组sortingfind正确的“池”
- 对
imageSrcList
每个元素进行sorting,以查找哪些是照片,哪些是聊天消息。 - 添加必要的JSX代码(例如
<Text>
或<Image/>
) - 推到一个输出数组
- 在
<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> ); }