移动应用开发新趋势:跨平台框架React Native实战
warning:
这篇文章距离上次修改已过190天,其中的内容可能已经有所变动。
以下是一个使用React Native创建简单视图的示例代码:
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class MyApp extends React.Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>Welcome to React Native!</Text>
<Text style={styles.instructions}>To get started, edit App.js</Text>
<Text style={styles.instructions}>{instructions}</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
这段代码展示了如何使用React Native创建一个简单的视图,包含了欢迎信息和编辑指导。同时,它还演示了如何使用StyleSheet
来定义组件的样式。这是学习React Native的一个很好的起点。
评论已关闭