React本机模板设计入门(1)
热点 2025-10-09 13:32:26
0
安装React Native命令行
打开终端或命令提示符并执行以下命令，本板设这将全局安装React Native Cli。机模计入 在此之前，本板设您必须使用最新的机模计入Node.js软件设置您的机器。 $ sudo npm install -g react-native-cli 注意 ：这仅适用于Mac OS，本板设很快它们将针对Linux和Windows发布 创建并启动React Native Project 这里的机模计入新命令将处理项目文件。 使用ng serve命令启动应用程序。本板设 $ react-native init MyProject $ cd MyProject 使用iOS模拟器启动项目 $ react-native run-ios 使用Android模拟器启动您的机模计入 $ react-native run-android 热加载 命令+ D 启用热加载以进行实时开发。
入门 此项目是本板设一个显示博客供稿的页面。 首先，机模计入我们将此页面分为3个组件，本板设如页眉，机模计入页脚和正文。本板设创建SRC文件夹 创建appHeader.js，机模计入appBody.js和appFooter.js等组件。本板设 
appHeader.js 标头组件，包含移动应用程序标头。 从 react 导入 React，{ Component} ; 从 react-native 导入 { Text } ; export default class AppHeader extends Component { render （）{ return（ < Text > Header </ Text > ）; } } 模块 .EXPORT = AppHeader ; appBody.js Body组件，这将解析JSON提要。服务器租用 从 react 导入 React，{ Component} ; 从 react-native 导入 { Text } ; 导出 默认 类 AppBody 扩展 Component { render （）{ return（ < Text > Body Content </ Text > ）; } } 模块 .EXPORT = AppBody ; appFooter.js 这包含所有导航。 从 react 导入 React，{ Component} ; 从 react-native 导入 { Text } ; export default class AppFooter extends Component { render （）{ return（ < Text > Footer </ Text > ）; } } 模块 .EXPORT = AppFooter ; index.ios.js＆index.android.js 导入根组件中的所有组件。 从 react 导入 React，{ Component} ; 从 react-native 导入 { Text ， AppRegistry } ; 从 ./src/components/appHeader 导入 AppHeader ; 从 ./src/components/appFooter 导入 AppFooter ; 从 ./src/components/appBody 导入 AppBody ; export default class MyProject extends Component { render （）{ return （ < View > < AppHeader > < AppBody > < AppFooter > < / View > ）; } } AppRegistry .registerComponent（ MyProject的 ，（）=> MyProject的 ）; NativeBase NativeBase 是React Native Install NativeBase 的用户界面框架 $ npm install native-base --save 重新启动构建 在安装新软件包时，必须重新启动 react-native 构建终端。 $ react-native run-ios 创建img文件夹在此 复制所有图像。 
appHeader.js 使用 NativeBase UI组件 修改 Header 组件 。 从 react 导入 React，{ Component} ; 从 react-native 导入 { Image } ; 从 native-base 导入 { Header，Left，Button，Icon，Title，Body，Right} ; export default class AppHeader extends Component { render（）{ return（ <Header> <Body> < Image source = { require （ ../img/9lessonsLogo.png ）} style = { { 宽度：160，高度：30}} /> </ Body> </ Header> ）; } } 模块 .EXPORT = AppHeader ; appBody.js 使用 NativeBase Card组件 修改 Body 组件 。免费信息发布网 从 react 导入 React，{ Component} ; 从 react-native 导入 { Text } ; 从 native-base 导入 { Content，Card，CardItem，Body} ; 导出 默认 类 AppBody 扩展 Component { render（）{ return （ <Content> <Card> <CardItem> <Body> < Text > 我的项目文本 </ Text > </ Body> </ CardItem> </ Card> </ Content> ）; } } 模块 .EXPORT = AppBody ; appFooter.js 您可以 使用 NativeBase组件 修改 Footer 组件 。 从 react 导入 React，{ Component} ; 从 react-native 导入 { Text } ; 从 native-base 导入 { Footer，FooterTab，Button，Icon} ; export default class AppFooter extends Component { render（）{ return （ <Footer> <FooterTab> <Button active > <Icon name =“egg”/> < Text > Feed </ Text > </ Button> <Button> <Icon name =“paper”/> < Text > Camera </ Text > </ Button> <Button> <Icon active name =“person”/> < Text >关于</ Text > </ Button> </ FooterTab> </ Footer> ）; } } 模块 。 NativeBase Customization 在项目文件夹中执行以下命令，这将创建themes文件夹。 看看现场演示。 $ node node_modules / native-base / ejectTheme.js 使用项目名称重命名主题文件。 
index.ios.js＆index.android.js 导入主题文件并与 getTheme 组件 链接 。 从 react 导入 React，{ Component} ; 从 react-native 导入 { Text ， AppRegistry } ; 从 native-base 导入 { Container，StyleProvider} ; 从 ./src/themes/components 导入 getTheme ; 从 ./src/themes/variables/nineLessons 导入 nineLessons ; 从 ./src/components/appHeader 导入 AppHeader ; 从 导入 AppFooter ./src/components/appFooter ; 从 ./src/components/appBody 导入 AppBody ; export default class MyProject extends Component { render（）{ return （ < StyleProvider style = { getTheme （ nineLessons ）}> <Container> <AppHeader /> <AppBody /> <AppFooter /> </ Container> </ StyleProvider > ）; } } AppRegistry .registerComponent（ MyProject的 ，（）=> ）; 重新构建您的IOS项目 $ react-native run-ios iOS视图 
重新构建您的Android项目 $ react-native run-android Android视图 