reactnative 学习1
- RR或者ctrl+m 摇一摇
- 打开项目开发菜单 ctrl+d
- 打开项目:atom 项目名称
1.react-native --version //查看当前reactNative版本
2.sudo npm update -g react-native-cli
//更新全局的reactNative到最新版本
3.npm info react-native
//查看服务器端的reactNative的各版本信息
4.npm install
//给下载的普通工程下载安装RN环境,根据配置的package.json
4.npm start
//开启nodejs服务器,客户端可连接下载react js代码,注意debug setting里的ip和端口号分别是电脑 ip:8081
5.react-native upgrade
//根据package.json配置的RN版本,更新RN环境代码
6.react-native run-android //运行Android工程
7.react-native run-ios //运行IOS工程
8.react-native init 项目名字
//初始化一个工程、下载React Native的所有源代码和依赖包
9.npm install --save react-native@0.18
//项目降级或升级到指定版本,记得react-native upgrade更新一下项目依赖等
10. npm install react-native-storage --save
// 安装某个lib到项目中
搭框架:
Day01
1.Facebook出产,手机端开发淘宝电商公司。Navigator适配于iOS和Android面向配置开发。通过js 进行封装。2015年9月15发布。
提倡组件化开发。
2.优势:跨平台开发,热部署追求机制的用户体验。Learn once,write anywhere。一次学,到处写。
3.虚拟DOM以及运行机制,将api和dom进行包装。
4.注意事项:iOS7以上,Android4.1以上版本适用。
Day02
- 配置环境https://reactnative.cn/docs/0.51/getting-started.html#content
Chocolatey包管理器安装
@powershell -NoProfile -ExecutionPolicy Bypass -Command
"iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))"&& SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
Python 2
choco
installpython2
Node
choco
installnodejs.
install
npmconfig set registry https:
//registry.
npm.taobao.org --
global
npmconfig set disturl https:
//npm.taobao.org/dist --
global
Yarn、React Native的命令行工具(react-native-cli)#
npminstall -g yarn react-
native-cli
yarn config
setregistry https:
//registry.npm.taobao.org--global
yarn config
setdisturl https:
//npm.taobao.org/dist--global
Android Studio
javac –version
查看版本号不超过
1.8
安装: http://www.android-studio.org/
安装有差异,安装完后才提示没有sdk点击安装
choco
installgit
react-native init 项目名称
- (cd..上层目录 C:/>cd c:/"documents and settings"下层目录)
- 出现
- 运行
- 出现
To run your app on iOS:
cd C:\Users\Administrator\Ahello
react-native run-ios
- or -
Open ios\Ahello.xcodeproj in Xcode
Hit the Run button
To run your app on Android:
cd C:\Users\Administrator\Ahello
Have an Android emulator running (quickest way to get started), or a device c
- onnected
运行: react-native run-android
Day3样式:style
ainer: {
backgroundColor : '#eae7ff',
flex : 1,
/*margin : 30,
borderWidth : 1,
borderColor : '#6435c9',
borderRadius : 16,
shadowColor : '#6435c9',
shadowOpacity : 0.6,
shadowRadius :2,
shadowOffset :{
height : 5,
width :4
},*/
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
fontStyle: 'italic',
letterSpacing: 2,
lineHeight: 33,
fontFamily: 'Helvetica Neue',
fontWeight: '300',
textDecorationLine: 'underline',
textDecorationStyle: 'solid',
},
day04 布局flexbox
快捷创建(View>Text{$})*3 tab键 ,Alt键选中多个输入
export default class App extends Component<Props> {
render() {
return (
<View style={styles.container}>
<View style= {[styles.item,styles.itemOne]}>
<Text style={styles.itemText}>1</Text>
</View>
<View style= {[styles.item,styles.itemTwo]}>
<Text style={styles.itemText}>2</Text>
</View>
<View style= {[styles.item,styles.itemThree]}>
<Text style={styles.itemText}>3</Text>
</View>
</View>
);
}
}
//style 行內style = {{}},或StyleSheet.create({})
const styles = StyleSheet.create({
item: {
backgroundColor:'#fff',
borderWidth: 1,
borderColor: '#6435c9',
margin:6,
},
itemOne: {},
itemTwo: {},
itemThree: {},
itemText:{
fontSize: 33,
fontFamily: 'Helvetica Neue',
fontWeight: '200',
color: '#6435c9',
padding: 30,
},
左右alignItems:flex-start,center,flex-end
alignSelf: flex-start,center,flex-end
上下justifyContent: 'center',//center让整体居中flex-end底部,space-around
总的view 设置flex:1 平均大小,让某一个变大单独加flex:值大于1
竖列排列:总的view设置flexDirection: 'row',
day05组件view
- view组件,
2. 文本组件,用view组件包起来<Text>内容</Text>
3.创建自定义Text组件,设计样式,然后导入到要使的地方
第一步:
上一个组件中引入:
<HeaderText>
nihao .net
</HeaderText>
第二步:
class HeaderText extends React.Component{
render(){
return (
<Text style= {styles.itemText}>
{this.props.children}
</Text>
)
}
}
4.图像组件 Image
<Image style={styles.image} source={require('./image/1.png')}/>
<Image style={styles.backgroundImage} source={require('./image/1.jpg')}>
</Image>
5.列表视图datasource renderRow