javascript - 如何在react-native中显示(二维)字符串数组

Question

我试图在我的 react native 代码中显示一个二维字符串数组，该数组是从 native 代码传递的。传递代码不是问题，但是我真的不知道如何正确显示这个数组。出于测试目的，我在 js 代码中将消息数组设置为常量。

这是我的数组:

const messageArray = [
  ["msg1", "date1"],
  ["msg2", "date2"],
  ["msg3", "date3"],
  ["msg4", "date4"],
  ["msg5", "date5"]
];

如何将其渲染到 View 中？

Answer 1

以下是如何执行此操作的示例。您可以使用解构。

const messageArray = [
  ["msg1", "date1"],
  ["msg2", "date2"],
  ["msg3", "date3"],
  ["msg4", "date4"],
  ["msg5", "date5"]
];

class App extends React.Component {
  render() {
    return (
      <div>
        {messageArray && messageArray.map(([message, date]) =>
          <div className='msg-item'>
            message: {message || ''}
            <br />
            date: {date || ''}
          </div>
        )}
      </div>
    );
  }
}

// Render it
ReactDOM.render(
  <App />,
  document.getElementById("react")
);

.msg-item {
  border: 1px solid black;
}

.msg-item + .msg-item {
  margin-top: 1rem;
}

<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>