新建工程:
react-native init HelloWorld
指定版本
react-native init myapp --version react-native@0.51.0
vscode 运行 React-native
修改launch.json
{
"version": "0.2.0",
"configurations": [
{
"name": "Debug Android",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "android",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
},
{
"name": "Debug iOS",
"program": "${workspaceRoot}/.vscode/launchReactNative.js",
"type": "reactnative",
"request": "launch",
"platform": "ios",
"target": "iPhone 5s",
"sourceMaps": true,
"outDir": "${workspaceRoot}/.vscode/.react"
}
]
Follow these commands
watchman watch-del-all
rm -rf $TMPDIR/react-*
rm -rf build/ios
yarn cache clean
lsof -i :8081
kill -9 9771
kill $(lsof -t -i:8081)
yarn start --reset-cache
错误:
Got an Error : No bundle url present. Make sure you’re running a packager server or have included a .jsbundle file in your application bundle
Follow these commands
watchman watch-del-all
rm -rf $TMPDIR/react-*
rm -rf build/ios
yarn cache clean
lsof -i :8081
kill -9 9771
kill $(lsof -t -i:8081)
yarn start --reset-cache
Restart PC and follow these commands
yarn install
react-native link
./update_node_modules.sh
react-native start
react-native run-ios
查看版本
react-native -v
或者
通过pageckage.json查看
更新版本 npm (Node Package Manger)
$npm update -g react-native
查询网上 RN 最新版本
npm info react-native
升级或者降级 RN 版本
# X.X.X 为版本号
$npm install --save react-native@X.X.X
主轴 副轴
修改主轴方向
//从上到下(默认)
flexDirection:'column',
//从下到上
flexDirection:'column-reverse',
//从左往右排列
flexDirection:'row',
//从右往左排列
flexDirection:'row-reverse',
主轴的对齐方式
//对齐主轴的起点位置
justifyContent:'flex-start',
//对齐主轴的终点位置
justifyContent:'flex-end',
//两端对齐
justifyContent:'space-between',
//平均分配位置
justifyContent:'space-around',
包裹方向:
flex-wrap: nowrap | wrap | wrap-reverse;
nowrap: 不包裹(默认)
wrap:包裹
wrap-reverse:
设置侧轴
alignItems:'flex-start',
alignItems:'flex-end',
alignItems:'center',
//默认值,如果没有设置高度,或者高度为 auto,那么子控件就沾满父控件
alignItems:'stretch',
实现圆角:
export default class Test2 extends Component {
render() {
return(
<View style={styles.container}>
<View style={styles.center}>
<Text style={styles.texter}>
1
</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container:{
backgroundColor:"purple",
marginTop:20,
flexDirection:"column",
height:100,
flexWrap:"wrap",
},
center:{
justifyContent:"center",
alignItems:"center",
width:30,
height:30,
borderRadius:15,
borderWidth:2,
backgroundColor:"orange",
borderColor:"orange",
margin:2
},
texter:{
color :"white",
},
});
圆角图片
<img src="http://7xqoji.com1.z0.glb.clouddn.com/mytest.jpg" width="100" hegiht="30" align=center />
网友评论