React-native

新建工程：

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 />