如何在react-native中顯示（二維）字符串數組

Question

我試圖在我的本機代碼中顯示一個二維字符串數組，該數組是從本機代碼傳遞過來的。 傳遞代碼不是問題，但是我並沒有真正了解如何正確顯示此數組。 為了進行測試，我在js代碼中將消息數組設為常量。

這是我的數組：

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

如何將此渲染到視圖中？

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> 

Answer 2

對於有相同問題的任何人，請使用jank的答案解決它：

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

export default class App extends Component {

    Render(){
        <View>
            {messageArray && messageArray.map(([message, date]) => <View>
            <Text>message: {message || ''}</Text>
            <Text>date: {date || ''}</Text>
            </View>)}
       </View>

}