React-native-app
提供:Dev Guides
React Native-アプリ
デフォルトのアプリを開くと、app.jsファイルが次のようになっていることがわかります。
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View style = {styles.container}>
<Text>Open up App.js to start working on your app!</Text>
<Text>Changes you make will automatically reload.</Text>
<Text>Shake your phone to open the developer menu.</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});
出力
こんにちは世界
「Welcome to finddevguides」という簡単なメッセージを表示するには、CSSパーツを削除し、次に示すように<view> </view>内の<text> </text>タグでラップして印刷するメッセージを挿入します。
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
render() {
return (
<View>
<Text>Welcome to finddevguides</Text>
</View>
);
}
}