开饭啦！React-native 的新手大礼包献上！

背景

首先声明是一个偏远山区的卑微小前端，新入公司之前的项目使用的 RN ，在此记录一下自己的路程。

基础操作

0. 配置环境

1. 拉取项目：git clone (-b 名称) git 地址

2. npm install/yarn install

3. cd ios

4. pod install

5. Xcode/android studio Xcode为例，找到项目文件夹，打开一层目录选择 ios 文件夹。

其实 html+js 的基础还可以的情况下，jsx 也就差不多的。这个到不用担心。

自己一般写的都是函数式组件（ 因为之前的项目有 class 组件也有函数式组件，听说函数式比 class 组件更好，所以直接入坑的函数式组件，后续的直接围绕函数式组件聊~ ）

import { SafeAreaView, View, Text } from 'react-native';

function Home(props){
    //传过来的参数
    const { theme, navigation, themeChange, self } = props;
    //样式
    const Style = getStyle(theme);
    //实例
    const dRef = React.createRef();
    //是否已经进入当前页面,进入 true,离开 false.(需要引入才能使用)
    const isFocused = useIsFocused();
    //创建的 user 变量，setUser 为设置 user 的方法，默认值为{}
    const [user, setUser] = useState({});
    
    //初次进入页面请求数据
    useEffect(() => {
    
    }, []);
    
    // 当 isFocused 发生变化时触发。
    useEffect(() => {
        if(isFocused){
            getData()
        }
    }, [isFocused])
    
    //定义函数
    const functionName(){
        //跳转
        navigation.navigate({
            name: '跳转的名字，具体详见 router',
            params:'跳转的传参'
        });
        //取参
        props.route.params
        //返回 可返回 jsx
        return false;
    }
    
    //函数式组件必须返回jsx，并且根元素只能有一个
    return <SafeAreaView><Text>1111</Text></SafeAreaView>
}

//样式
function getStyle(theme) {
    return StyleSheet.create({
        // style 名
        flex: {
            //一般需要适配尺寸，封装的 unitWidth
            width: unitWidth(44),
            height: unitWidth(44),
            //一般需要适配尺寸 封装的 unitFont
            fontSize: unitFont(34),
            //属性名均需要""包裹
            display:"flex",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center"
            //主题配置
            color: themes[theme].primaryTextColor
        },
    })
}

//联合下方的 connect 使用，个人理解是将 theme/self 纳入监听范围，相当于 vue的 computed等等
const mapState = state => {
    return {
        theme: state.base.theme,
        self: state.user.userInfo
    }
};

//任何时候，只要 Redux store 发生改变，mapStateToProps 函数就会被调用
export default connect(
    mapState
)(Home)

更新iconfont图标

1. 打开阿里图标库,复制symbol地址

2. 替换根目录下iconfont.json文件中地址

3. 运行npx iconfont-rn命令进行更新

安卓报错

npx jetify

安卓打包

1. 设置config.js

2. 保存所有修改文件

3. 设置android版本号

4. 清理包缓存 cd android && ./gradlew clean && cd ../

5. 删除bundle文件

6. 打包新的js文件 npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

7. 删除res下的重复文件

8. 安卓打包命令：cd android && ./gradlew assembleRelease && cd ../