图片标题栏

最新推荐文章于 2024-09-26 16:26:52 发布

qq_43652136

最新推荐文章于 2024-09-26 16:26:52 发布

阅读量93

点赞数

分类专栏：是文章标签：图片标题栏 react native

本文链接：https://blog.csdn.net/qq_43652136/article/details/84023221

版权

是专栏收录该内容

3 篇文章 0 订阅

订阅专栏

黄牌警告
console.disableYellowBox = true;
底部图片
导入三方图片库：yarn add react-native-vector-icons
引入关联：react-native link
导入依赖：
import Ionicons from “react-native-vector-icons/Ionicons”;
import React, { Component } from “react”;
Android项目中做编译，运行(更新、更新、更改implementation)

        {
            //配置底部导航图片
            navigationOptions: ({ navigation }) => ({
              tabBarIcon: ({ focused, tintColor }) => {
                const { routeName } = navigation.state;
                let iconName;
                if (routeName === "Tab1") {
                  iconName = "ios-document";
                } else if (routeName === "Tab2") {
                  iconName = "ios-create";
                }

                return <Ionicons name={iconName} size={25} color={tintColor} />;
              }
            }),
tabBarOptions: {
  activeTintColor: "#0000ff"
}
        }

集成到现有原生应用
1.创建RN项目
2.AS中创建原生Android项目（模拟原生已经存在的Android项目）
3.将RN中自带的RNActivity,RNApplication页面，导入到Android原生项目中：
1)导入RN依赖
在你的app中 build.gradle 文件中添加 React Native 依赖:
dependencies {
…
implementation “com.facebook.react:react-native:+” // From node_modules.
}

        在项目的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口，必须写在 "allprojects" 代码块中:
        allprojects { 
            repositories { 
                ... 
                maven {
                // All of React Native (JS, Android binaries) is installed from npm 
                    url "$rootDir/../node_modules/react-native/android" 
                } 
            } 
        ... 
        }
    2)在 AndroidManifest.xml 清单文件中声明网络权限:
        <uses-permission android:name="android.permission.INTERNET" />
        <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
        DevSettingsActivity 界面（即开发者菜单），则还需要在 AndroidManifest.xml 中声明:
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />

    3)在AndroidManifest.xml中声明RNActivity,RNApplication
        <application
            android:name=".RNApplication"
            android:allowBackup="true"
            android:icon="@mipmap/ic_launcher"
            android:label="@string/app_name"
            android:roundIcon="@mipmap/ic_launcher_round"
            android:supportsRtl="true"
            android:theme="@style/AppTheme">

            <activity android:name=".MainActivity">
                <intent-filter>
                    <action android:name="android.intent.action.MAIN" />

                    <category android:name="android.intent.category.LAUNCHER" />
                </intent-filter>
            </activity>

            <activity android:name=".RNActivity"></activity>
            <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
        </application>        

    4)通过android项目点击事件，启动RN视图
        Intent intent = new Intent(MainActivity.this, RNActivity.class);
        startActivity(intent);

4)将android原生项目，导入到RN/android目录：最编译运行
5)运行app项目，启动RN服务即可


64位手机问题解决:
defaultConfig {
    ndk {
        abiFilters "armeabi-v7a", "x86"
    }
    packagingOptions {
        exclude "lib/arm64-v8a/libimagepipeline.so"
    }
}