はじめに
react NativeはOS(Android,iOS)に依存しないアプリをかけるので、筆者の中での勉強の優先順位をじわじわと挙げている。
そんな中で、タイトルにもなっている
Invariant Violation: Text stringa must be rendered within a componet
が出てきた時の対応方法を書いておく。
コード
App.js
~~~~~(中略)~~~~~
export default class App extends React.Component {
constructor(props){
super(props);
this.state = {
todo: [
{index: 1, tilte: "原稿を書く", done: false},
{index: 2, tilte: "犬の散歩をする", done: false}
],
currentIndex:2
}
}
render() {
return (
<View style={styles.container}>
<View style={styles.filter}>
<Text>Filterがここに配置されます</Text>
</View>
<ScrollView style={styles.todolist}>
<FlatList data={this.state.todo}
renderItem={({item}) => <Text>{item.title}</Text>}
keyExtractor={(item, index) => "todo_" + item.index}
/>
</ScrollView>}
<View style={styles.input}>
<Text>テキスト入力がここに配置されます</Text>
</View>
</View>
);
}
}
~~~~~(中略)~~~~~
解決
コードを書いてみてわかった。
の後ろの}が余計だった。
削除して実行してみると、エラーなく実行できた。