动态更改文本输出 - React native

Question

问题

如何在我的服务器每次更新时更新我的​​ text/images。

我希望发生的事情

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

发生了什么

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

注意：我知道服务器向 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 和允许用户数组
• firstUser 第一个用户 - 以及启动 "pool"
的用户
• imageSrcList 这包括图像和聊天的 URL 消息，这是我需要帮助的地方。

我希望应用如何解释数据。

每个 "pool" 都是上述数组中的一个对象。当用户单击 "pool".

时，我想让应用程序显示所有 "chat" 文本和来自 imageSrcList 的图像

这应该怎么办

（在我看来 - 如果您知道更好的方法，一定要分享！）

1. 对数组进行排序以找到正确的"pool"
2. 对 imageSrcList 的每个元素进行排序，找出哪些是照片，哪些是聊天消息。
3. 添加必要的 JSX 代码（例如 <Text> 或 <Image/>）
4. 推送到输出数组
5. 在<ScrollView>
中显示输出数组

当前解决方案

这个解决方案不起作用，但它应该可以帮助您理解我正在尝试做的事情。

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

Answer 1

另一种可行的方法是：

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) 创建一个_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>
    );
}