React Native搭建iOS开发环境

2020-01-15 18:43:35王旭
命令保持你的程序是最新的。

三、iOS开发环境

1、iOS开发环境: (默认读者已经安装Xcode7.0或以上版本,没有可自行前往AppStore下载)

使用npm(node包管理工具)安装react-native-cli(此处应注意权限问题,如果遇到权限问题,请在下面的命令前加上sudo)


npm install -g react-native-cli

初始化工程(下面的语句中千万不要加sudo,后果自负)


react-native init ReactNativeProject(工程名)

在初始化的过程中,如果进度缓慢,推荐你将npm仓库源换成国内镜像:(翻墙用户请忽略) 在终端输入:


npm config set registry https://www.easck.com//npm.taobao.org/dist

2、使用Xcode运行调试程序

查找ReactNativeProject文件目录

按住快捷键Command+Shift+G,在弹出的“前往文件夹”对话框中输入路径/Users/yangshebing/ReactNativeProject(yangshebing表示电脑用户名,请自行更改),点击前往。在文件目中的ios文件夹下找到“ReactNativeProject.xcodeproj”工程文件。如图所示:

react,native开发环境,native,ios开发,native环境搭建

运行ReactNativeProject工程

使用Xcode打开“ReactNativeProject.xcodeproj”工程文件,按住快捷键"Command+R"运行此项目,运行成功后便可在模拟器上看到效果。

编辑index.ios.js文件修改界面

笔者编辑index.ios.js文件工具是Vim,每当编辑完index.ios.js文件并保存之后,在模拟器(Simulator)中,按Command+R可刷新界面查看改变后的效果。

下面我们也试着稍微修改一下index.ios.js文件:


/**
 * Sample React Native App
 * https://www.easck.com//添加文本展示
  <Text style={styles.welcome}>
   美女
  </Text>
  //添加图片展示
  <Image 
  source= 
  //这里需要指定图片的大小
  style={styles.picture} />
  </View>
 );
 }
}

const styles = StyleSheet.create({
 container: {
 flex: 1,
 justifyContent: 'center',
 alignItems: 'center',
 backgroundColor: '#F5FCFF',
 },
 //这里可以设置文本的字体,对齐方式等
 welcome: {
 fontSize: 20,
 textAlign: 'center',
 margin: 10,
 },
 //新增图片style,设置图片大小
 picture: {
 width: 80,
 height: 150,
 },
});

AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);

刷新后运行效果如下图所示:

react,native开发环境,native,ios开发,native环境搭建