动态更改文本输出 - React native

Question

问题

每次服务器更新时如何更新文本/图像。

我希望发生什么

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

会发生什么

1. 服务器将文本添加到DB
2. 使用Web套接字的服务器消息RN app
3. RN app从服务器请求数据
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第一个用户 - 以及启动＆＃34;池＆＃34;
的用户
• imageSrcList这包含图片和聊天的网址 消息，这是我需要帮助的地方。

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

每个＆＃34;游泳池＆＃34;是上面数组中的一个对象。我想让应用程序显示所有＆＃34;聊天＆＃34;文本以及用户点击＆＃34;池＆＃34;时来自imageSrcList的图片。

应该如何解决这个问题

（在我看来 - 如果你知道一种更好的方式分享！）

1. 对数组进行排序以找到合适的＆＃34; pool＆＃34;
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>
    );
}