react native学习笔记9——引入第三方组件和react-navigation的使用

最新推荐文章于 2024-09-12 12:18:02 发布
最新推荐文章于 2024-09-12 12:18:02 发布
阅读量5k 收藏 2
点赞数 2
分类专栏： React Native 学习笔记 React Native每日一学 文章标签： react-native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/teagreen_red/article/details/78044480
版权

前面我介绍过几个常用的内置组件的使用方法，对于一些较为复杂的需求可能需要写自定义组件来满足，但是有些时候第三方库的组件可以完美的满足相应的需求，没必要自己去实现一套，这时我们不妨利用现有的轮子，方便快捷，省时省事。
首先介绍引入第三方组件的方法。

1.引入第三方组件

1.1 引入第三方库，进入项目的根目录（即package.json所在目录），输入命令：

npm install [第三方库] --save

例如:

npm install react-native-tab-navigator --save

1.2 在要使用该组件的js文件中import该模块:

import [第三方组件] from '[第三方库]';

例如:

import TabNavigator from 'react-native-tab-navigator';

2.React Navigation的使用

现在几乎所有的应用都少不了页面跳转功能，除了页面跳转功能外，大多数应用还提供页面导航功能（底部导航栏，顶部导航栏还有侧滑导航），在React Native中这些功能都可以由Navigation实现。

React Native在0.44版本之前是由Navigator作为导航器，从0.44开始弃用了Navigator，将其放到react-native-deprecated-custom-components，如果仍然想使用Navigator，需要先安装该模块：

yarn add react-native-deprecated-custom-components

然后在代码中引入即可

import { Navigator } from 'react-native-deprecated-custom-components'

怎么引入React-Navigation呢？如上所述，在项目的根目录输入命令：

npm install --save react-navigation

React Navigation从0.44版本开始顶替了之前的Navigator。主要包括三个部分

  • StackNavigator： 顶部导航栏，用作页面跳转
  • TabNavigator：tab选项卡导航，通常在顶部或者底部
  • DrawerNavigator：抽屉（侧拉）导航

2.1 StackNavigator

StackNavigator见名知义，堆栈式导航器，每次跳转到新页面时都放在堆栈顶部，从该页面返回时从堆栈顶部移除该页面。首先我们从一个单页面开始使用Stack Navigator。

2.1.1 StackNavigator的基本使用方法

新建一个StackMainScreen.js

import React from 'react';
import {
    AppRegistry,
    Text,
} from 'react-native';
import { StackNavigator } from 'react-navigation';

class StackMainScreen extends React.Component {
    static navigationOptions = {
        title: 'Welcome',
    };
    render() {
        return <Text>Hello, Navigation!</Text>;
    }
}

const SimpleApp = StackNavigator({
    Home: { screen: StackMainScreen },
});

export default SimpleApp;

标题可通过title属性在navigationOptions中配置，另外还有许多别的属性也可以在这里设置。
页面效果如下：

下面添加一个新的页面ChatScreen.js

import React, {Component} from "react";
import {StyleSheet,View, Text } from "react-native";

export default class ChatScreen extends React.Component {
    static navigationOptions = {
        title: 'Chat with Lucy',
    };
    render() {
        return (
            <View>
                <Text>Chat with Lucy</Text>
            </View>
        );
    }
}

回到StackMainScreen.js，添加一个Button按钮，使用navigate链接到ChatScreen。
另外别忘了引入Button组件。

import {
    AppRegistry,Text,View,Button,
} from 'react-native';
class StackMainScreen extends React.Component {
    static navigationOptions = {
        title: 'Welcome',
    };
    render() {
        const { navigate } = this.props.navigation;
        return(
        <View>
            <Text>Hello, Chat App!</Text>
            <Button
                onPress={() => navigate('Chat')}
                title="Chat with Lucy"
            />
        </View>);
    }
}

最后将ChatScreen 页面加到StackNavigator中

const SimpleApp = StackNavigator({
    Home: { screen: StackMainScreen },
    Chat: { screen: ChatScreen },
});

通过点击跳转按钮可以跳转到ChatScreen页面，点击返回则会回退到StackMainScreen页面，如下图所示：

2.1.2 传递参数

通过导航器可以通过将参数从一个页面传递到另一个页面。
将StackMainScreen中的Button组件改为：

       <Button
          onPress={() => navigate('Chat', { user: 'Lucy' })}
          title="Chat with Lucy"
        />

然后在ChatScreen组件中通过路由接收参数，显示出来

class ChatScreen extends React.Component {
  // Nav options can be defined as a function of the screen's props:
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });
  render() {
    // The screen's current route is passed in to `props.navigation.state`:
    const { params } = this.props.navigation.state;
    return (
      <View>
        <Text>Chat with {params.user}</Text>
      </View>
    );
  }
}

然后reload可以看到：

以上是Stack Navigator的基本使用。
源码地址在这里

关于源码的使用，你可以在根目录中的App.js的render中替换你想显示的组件，如StackMainScreen ，当然别忘记先import。具体可以看这个系列文章react native学习笔记3中
Demo使用的介绍。
StackMainScreen.js

import StackMainScreen from "./src/05_navigation/stacknavigation/StackMainScreen";

export default class ExerciseProject extends Component {
    render() {
        return (
            <StackMainScreen />
        );
    }
}
AppRegistry.registerComponent('ExerciseProject', () => ExerciseProject);

2.1.3 配置标题栏

标题栏是只有Stack Navigator独有的，TabNavigator和Drawernavigator是没有的，在上述示例中，ChatScreen通过设置navigationOptions中的title参数显示标题的内容

class ChatScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,
  });
  ...
}

类似的，可以通过设置 headerRight参数在导航栏中添加自定义的右部按钮。

    static navigationOptions = ({ navigation }) => ({
        title: `Chat with ${navigation.state.params.user}`,
        headerRight: <Button title="Info" />,
    });

navigationOptions 可通过 navigation prop 属性来定义，navigationOptions 提供navigation.setParams方法来设置修改navigationOptions的参数。下面演示当按下标题栏右部按钮，通过路由参数的不同显示不同的按钮。

static navigationOptions = ({ navigation }) => {
  const {state, setParams} = navigation;
  const isInfo = state.params.mode === 'info';
  const {user} = state.params;
  return {
    title: isInfo ? `${user}'s Contact Info` : `Chat with ${state.params.user}`,
    headerRight: (
      <Button
        title={isInfo ? 'Done' : `${user}'s info`}
        onPress={() => setParams({ mode: isInfo ? 'none' : 'info'})}
      />
    ),
  };
};

navigationOptions 其他的一些重要参数介绍

  • title:导航栏标题
  • header: 导航栏对象，设置null可隐藏导航栏
  • headerTitle：导航栏标题，推荐用这个方法。
  • headerBackTitle: (ios)左上角的返回键文字, 默认是上一个页面的标题
  • headerRight: 导航栏右侧元素
  • headerLeft: 导航栏左侧元素
  • headerStyle: 导航栏的样式
  • headerTitleStyle: 导航栏的标题的样式。在ios中导航栏标题默认居中，android中标题默认居左，如想居中可以设置alignSelf:'center'
  • headerTintColor : 导航栏文字颜色
  • headerPressColorAndroid：设置按钮Material Design风格涟漪效果的颜色（android 5.0以上系统独有）
  • gesturesEnabled: 是否允许右滑返回，在iOS上默认为true，在Android上默认为false

2.1.4 StackNavigator(RouteConfigs, StackNavigatorConfig)

StackNavigator(RouteConfigs, StackNavigatorConfig)导航的配置，在上述的StackMainScreen.js中的StackNavigator对象添加上下切换的页面切换风格。

const SimpleApp = StackNavigator(
    {
       Home: { screen: StackMainScreen },
       Chat: { screen: ChatScreen },
     },
    {
       mode: 'modal',
     }
);

RouteConfigs路由的配置

  • StackNavigator第一个参数RouteConfigs。
  • screen：对应界面名称，可以在其他页面通过screen传值和跳转。

StackNavigatorConfig
StackNavigator第二个参数StackNavigatorConfig，配置StackNavigator的一些属性。

StackNavigatorConfig的参数介绍
路由参数：

  • initialRouteName: 设置默认的页面组件，必须是上面已注册的页面组件
  • initialRouteParams: 初始路由的参数
  • navigationOptions: 屏幕导航的默认选项
  • paths: RouteConfigs里面路径设置的映射

可视化参数

  • mode: 页面切换模式:
    • modal: 上下切换（默认的切换模式）
    • card: 普通app常用的左右切换（只在ios中有效）
  • headerMode: 导航栏的显示模式:
    • float: 无透明效果, 默认
    • screen: 有渐变透明效果, 如微信QQ的一样
    • none: 隐藏导航栏
  • cardStyle: 设置页面切换效果
  • transitionConfig: 设置页面切换动画配置
  • onTransitionStart: 页面切换开始时的回调函数
  • onTransitionEnd: 页面切换结束时的回调函数

2.2 TabNavigator

TabNavigator选项卡导航，对于功能比较丰富的应用通常会选用选项卡导航，例如手机qq、微信、微博等常用app。

2.2.1 TabNavigator的基本使用方法

新建一个TabMainScreen.js，实现主页以及选项卡。

import React from 'react';
import {
    AppRegistry,
    Text,
    View,
    Button,
} from 'react-native';
import SecondScreen from "./SecondScreen";
import { TabNavigator } from "react-navigation";

class TabMainScreen extends React.Component {
    render() {
        return <Text>Hello Mr.onion</Text>
    }
}
const TabMainScreenNavigator = TabNavigator({
    Main: { screen: TabMainScreen },
    Second: { screen: SecondScreen },
});
export default TabMainScreenNavigator;

再新建一个SecondScreen.js，实现选项卡的第二个页面。

import React from 'react';
import {
    AppRegistry,
    Text,
    View,
    Button,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
export default class SecondScreen extends React.Component {
    render() {
        return <Text>Hello Fang</Text>
    }
}

除了通过选项卡切换页面，还可以通过按钮指定跳转到别的选项卡页面。
在TabMainScreen.js中的class TabMainScreen加上navigationOptions的设置，类似StackNavigator的navigationOptions 。设置标签的名字和图标。

static navigationOptions = {
        tabBarLabel: 'Home',
        // Note: By default the icon is only shown on iOS. Search the showIcon option below.
        tabBarIcon: ({ tintColor }) => (
            <Image
                source={require('../../images/color_for_danmu_normal.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        ),
    };

添加相应的icon的style

const styles = StyleSheet.create({
    icon: {
        width: 26,
        height: 26,
    },
});

render渲染页面改为一个按钮，点击可跳转到SecondScreen。

render() {
        return (
            <Button
                onPress={() => this.props.navigation.navigate('Second')}
                title="Go to notifications"
            />
        );
}

别忘了import相应的组件StyleSheet,Button,Image

import {
    AppRegistry,
    Text,
    View,
    Button,
    StyleSheet,
    Image,
} from 'react-native';

修改TabNavigator的设置，该组件在android中默认不显示选项卡的图标，ios中默认显示。若要达到相同的效果，都显示选项卡图标，可以在tabBarOptions显示指定showIcon:'true'。

const TabMainScreenNavigator = TabNavigator(
    {
        Main: { screen: TabMainScreen },
        Second: { screen: SecondScreen },
    },
    {
        tabBarPosition: 'top',
        animationEnabled: true,
        tabBarOptions: {
            activeTintColor: '#e91e63',
            showIcon:'true'
        },
    }
);

类似的,SecondScreen.js中加上navigationOptions的设置

static navigationOptions = {
        tabBarLabel: 'Second',
        tabBarIcon: ({ tintColor }) => (
            <Image
                source={require('../../images/face_unpress.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        ),
    };

render渲染页面改为一个按钮，点击可返回上一页

 render() {
        return (
            <Button
                onPress={() => this.props.navigation.goBack()}
                title="Go back home"
            />
        );
    }

相应的样式style及import同TabMainScreen。

2.2.2 TabNavigator(RouteConfigs, TabNavigatorConfig)

TabNavigator(RouteConfigs, TabNavigatorConfig)导航的配置

const TabMainScreenNavigator = TabNavigator(
    {
        Main: { screen: TabMainScreen },
        Second: { screen: SecondScreen },
    },
    {
        tabBarPosition: 'top',
        animationEnabled: true,
        tabBarOptions: {
            activeTintColor: '#e91e63',
            showIcon:'true'
        },
    }
);

若将tabBarPosition: 'top'改为bottom，则选项栏到下面：

RouteConfigs

RouteConfigs导航路由的配置，同StackNavigator的路由配置RouteConfigs一样。

TabNavigatorConfig

TabNavigatorConfig配置TabNavigator的一些属性。
路由参数

  • initialRouteName： 首次加载时设置默认的标签路由名称
  • backBehavior：按 back 键是否跳转到第一个选项卡(首页)， none 为不跳转
  • paths：RouteConfigs里面路径设置的映射
  • order：定义各选项卡的顺序

可视化参数

  • tabBarComponent ：设置标签栏组件，e.g.TabBarBottom(在ios中是默认TabBarBottom)，TabBarTop (在android中是默认TabBarTop )
  • tabBarPosition：设置标签栏的位置，iOS默认在底部，安卓默认在顶部。（ top：顶部 | bottom：底部 )
  • swipeEnabled：是否可以滑动切换tab
  • lazy：当页面到前台时，是否惰性呈现标签，而不是提前渲染，意思是在app打开的时候将底部标签栏全部加载，默认false，推荐改成true
  • tabBarOptions：配置标签栏的一些属性，具体如下。

tabBarOptions配置底部标签栏TabBarBottom的属性(ios中的默认标签栏)

  • activeTintColor：选中状态下选项卡的label和icon的前景色。
  • activeBackgroundColor：选中状态下选项卡的label和icon的背景色。
  • inactiveTintColor：未选中状态下选项卡的label和icon的前景色。
  • inactiveTintColor：未选中状态下选项卡的label和icon的背景色。
  • showLabel：是否显示label，默认开启。
  • style：tabbar的样式。
  • labelStyle：label的样式。
  • tabStyle：tab选项卡的样式。

示例

tabBarOptions: {
  activeTintColor: '#e91e63',
  labelStyle: {
    fontSize: 12,
  },
  style: {
    backgroundColor: 'blue',
  },
}

tabBarOptions配置顶部标签栏TabBarTop的属性(android中的默认标签栏)

  • activeTintColor：选中状态下选项卡的label和icon的前景色。
  • inactiveTintColor：未选中状态下选项卡的label和icon的前景色。
  • showIcon：是否显示图标，默认关闭。
  • showLabel：是否显示label，默认开启。
  • style：tabbar的样式。
  • labelStyle：label的样式。
  • upperCaseLabel：是否使标签大写，默认为true。
  • pressColor：material design涟漪效果的颜色（安卓版本需要大于5.0）。
  • pressOpacity：按压标签的透明度变化（安卓版本需要小于5.0）。
  • scrollEnabled：是否启用可滚动选项卡。
  • tabStyle：tab的样式。
  • indicatorStyle：标签指示器的样式对象（选项卡底部的行）。安卓底部会多出一条线，可以将height设置为0来暂时解决这个问题。
  • labelStyle：label的样式。
  • iconStyle：图标的样式。

示例：

tabBarOptions: {
  labelStyle: {
    fontSize: 12,
  },
  tabStyle: {
    width: 100,    
  },
  style: {
    backgroundColor: 'blue',
  },
  indicatorStyle: { height: 0 }
}

2.2.3 配置选项卡

TabNavigator选项卡的配置类似于StackNavigator的标题栏的配置，都是设置navigationOptions。例如SecondScreen中的navigationOptions，设置了选项卡的名称label和图标icon。

static navigationOptions = {
        tabBarLabel: 'Second',
        tabBarIcon: ({ tintColor }) => (
            <Image
                source={require('../../images/face_unpress.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        ),
    };

navigationOptions参数介绍

  • title：在选项栏中作为tabBarLabel，若在导航栏中为headerTitle。
  • tabBarVisible：是否显示选项栏。
  • tabBarIcon：选项卡图标。
  • tabBarLabel：选项卡名称。
  • tabBarOnPress：选项卡点击事件处理。

示例中的源码可在这里下载

2.3 DrawerNavigator

DrawerNavigator 侧滑（抽屉）导航器

2.3.1 DrawerNavigator的基本使用方法

基本使用方法类似TabNavigator，这里就不展开细说了，直接上示例源码。首页DrawerMainScreen.js

import React from 'react';
import {
    AppRegistry,
    Text,
    View,
    Button,
    StyleSheet,
    Image,
} from 'react-native';
import DrawerSecondScreen from "./DrawerSecondScreen";
import { DrawerNavigator } from "react-navigation";

class DrawerMainScreen extends React.Component {
    static navigationOptions = {
        drawerLabel: 'Home',
        drawerIcon: ({ tintColor }) => (
            <Image
                source={require('../../images/color_for_danmu_normal.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        ),
    };

    render() {
        return (
            <Button
                onPress={() => this.props.navigation.navigate('Second')}
                title="Go to Second"
            />
        );
    }
}

const styles = StyleSheet.create({
    icon: {
        width: 24,
        height: 24,
    },
});

const DrawerMainScreenNavigator = DrawerNavigator({
    Home: {
        screen: DrawerMainScreen,
    },
    Second: {
        screen: DrawerSecondScreen,
    },
});
export default DrawerMainScreenNavigator;

SecondScreen.js

import React from 'react';
import {
    AppRegistry,
    Text,
    View,
    Button,
    StyleSheet,
    Image,
} from 'react-native';
import { StackNavigator } from 'react-navigation';
export default class DrawerSecondScreen extends React.Component {
    static navigationOptions = {
        drawerLabel: 'Notifications',
        drawerIcon: ({ tintColor }) => (
            <Image
                source={require('../../images/face_unpress.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        ),
    };

    render() {
        return (
            <Button
                onPress={() => this.props.navigation.goBack()}
                title="Go back home"
            />
        );
    }
}

const styles = StyleSheet.create({
    icon: {
        width: 26,
        height: 26,
    },
});

打开和关闭侧滑栏的方法：

this.props.navigation.navigate('DrawerOpen'); // 打开
this.props.navigation.navigate('DrawerClose'); // 关闭

也可以使用DrawerToggle切换的方式，DrawerToggle会根据侧滑栏的状态来切换。

this.props.navigation.navigate('DrawerToggle');

2.3.2 DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

DrawerNavigator(RouteConfigs, DrawerNavigatorConfig)

RouteConfigs

RouteConfigs导航设置，同StackNavigator的RouteConfigs

DrawerNavigatorConfig

DrawerNavigatorConfig配置DrawerNavigator的一些属性。
路由参数：

  • initialRouteName： 首次加载时设置默认的路由名称
  • backBehavior：按 back 键是否跳转到首页， none 为不跳转
  • paths：RouteConfigs里面路径设置的映射
  • order：定义各drawer items的顺序
    可视化参数：
  • drawerWidth：侧滑栏长度
  • drawerPosition：侧滑栏的位置，默认左边。(left | right)
  • contentComponent ：侧滑栏组件的内容，导航的选项，默认是DrawerItems
  • contentOptions：配置侧滑栏内容
  • useNativeAnimations：使用原生动画，默认是true
    代码示例：
{
  drawerWidth: 200,
  drawerPosition: 'right',
  contentComponent: props => <ScrollView><DrawerItems {...props} /></ScrollView>
}
自定义侧滑栏菜单内容

通过DrawerNavigatorConfig中的contentComponent 对象DrawerItems 配置自定义的侧滑栏菜单内容。
示例代码：

import { DrawerItems } from 'react-navigation';

const CustomDrawerContentComponent = (props) => (
  <View style={styles.container}>
    <DrawerItems {...props} />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

DrawerItems的参数配置contentOptions：

  • items - the array of routes, can be modified or overridden
  • activeItemKey - key identifying the active route
  • activeTintColor：选中状态下侧滑栏菜单的label和icon的前景色。
  • activeBackgroundColor：选中状态下侧滑栏菜单的label和icon的背景色。
  • inactiveTintColor：未选中状态下侧滑栏菜单的label和icon的前景色。
  • inactiveTintColor：未选中状态下侧滑栏菜单的label和icon的背景色。
  • onItemPress(route)：侧滑栏菜单按下事件处理
  • style：侧滑栏菜单样式
  • labelStyle：label的样式

示例：

contentOptions: {
  activeTintColor: '#e91e63',
  style: {
    marginVertical: 0,
  }
}

2.3.3 配置侧滑栏菜单

DrawerNavigator选项卡的配置类似于TabNavigator选项卡的配置，都是设置navigationOptions。例如DrawerSecondScreen中的navigationOptions，设置了选项卡的名称label和图标icon。

static navigationOptions = {
        drawerLabel: 'Notifications',
        drawerIcon: ({ tintColor }) => (
            <Image
                source={require('../../images/face_unpress.png')}
                style={[styles.icon, {tintColor: tintColor}]}
            />
        ),
    };

navigationOptions参数介绍

  • title：在选项栏中作为drawerLabel，若在导航栏中为headerTitle。
  • drawerIcon：侧滑栏菜单图标。{ focused: boolean, tintColor: string }
  • drawerLabel：侧滑栏菜单名称。{ focused: boolean, tintColor: string }

示例中的源码在这里

MrOnion0603
关注
专栏目录
React Native学习笔记三：使用组件引入方式写Hello World
九段刀客的博客
07-14 165
App.js const App = () => { return ( <View> <Header /> </View> ); }; export default App; Header.js import React from 'react'; import {View, Text, StyleSheet} from 'react-native'; const Header = () => { return .
ReactNative学习笔记（三）——ReactNavigation
JiaoYang1024
04-13 587
       今天跟着RN中文网学习使用导航器跳转页面，现在官方推荐React-Nevigation。但是RN中文网写的太简单，不知道该怎么用，就去搜索了其他文章。结果发现其他文章又写的太繁琐，一上来就给你介绍一大堆属性，代码也很零散，看的让人头大，几乎想要放弃。后来看到了xiongtm的这篇博客，相对还算简单一些，也贴上了github的项目地址，我就直接clone下来了，运行了一下，发现例子也比...
react-native-custom-component:简单封装的一些component
05-02
react-native-custom-component 简单封装的一些component，还有很多可以改进的地方。 如何使用 import BaseScrollView from './Components/BaseScrollView' import BaseFlatList from './Components/BaseFlatList' //上拉加载更多 onLoadMoreRequest() { this.setState({isLoadingMore:true}); let timer = setInterval(() => { let data = [].concat(this.state.data).concat(['2','3']); this.setState({data:data});
react-native-deprecated-custom-components
weixin_30241919的博客
04-09 559
速记：从0.44版本开始，Navigator被从react native的核心组件库中剥离到了一个名为react-native-deprecated-custom-components的单独模块中。 如果你需要继续使用Navigator，则需要先yarn add react-native-deprecated-custom-components安装，然后从这个模块中import， 即import ...
【React Native】第三方组件
最新发布
票票的博客
09-12 579
第三方组件：WebView、Picker、Swiper、AsyncStorage、Geolocation、Camera、ImagePicker、react-native-vector-icons
React Native 定义组件 引用组件
鲨鱼不会飞的博客
07-19 411
React Native 定义组件 引用组件框架自带很多的常用组件，但是如果不能满足产品需求，如何自定义呢？
React Hook基操， 引入第三方组件库 antDesign，路由，组件通信
ada的博客
08-18 746
React Hook基操， 引入第三方组件库 antDesign，路由，组件通信
Android-使用ReactNative开发的一个笔记App
08-13
- 使用`fetch`或第三方库如axios进行API调用，实现数据的存储和检索，比如用户登录、笔记的创建和获取。 - 可能会有本地存储（如AsyncStorage）用于离线缓存数据。 6. **导航**： - 项目可能会使用React ...
react-native-practical-guide:Udemy课程的练习文件，作业和笔记
04-14
理解如何创建自定义组件、使用内置组件（如View、Text、Image）以及管理组件的状态和属性，是掌握React Native的关键。通过课程的练习文件，你可以亲手实践组件的创建和复用，加深理解。 3. **网络请求与数据管理**...
React Native跨平台开发学习笔记
Pulse的博客
02-27 2755
App的分类（按开发方式） 大致可以分为这3种： native app（原生app：ios或安卓）原生应用程序 原生应用程序外观和运行起来（性能）是最佳的。可以访问本地资源，开法成本高。发布审核周期长。 web app/ H5 app （APIclound）H5应用程序 整体量级轻，开发成本低，基于浏览器，可以跨平台使用。资源都在远程服务器。网速受到限制时，交互效果也会受到限制，页面跳转费力，不稳定感更强。无法操作很多手机原生设备，摄像头，麦克风，不支持多点触控等。 hybrid app（混合app）混合
React-native-Book-reader
03-06
React Native的`Image`组件可以用于显示静态图像，而通过状态管理和路由管理库（如Redux和React Navigation）可以实现跨页面的数据共享。 4. **更改字体和颜色**：这个功能允许用户根据个人喜好调整文字样式。React...
原生代码中接入React Native
chichengjunma的专栏
11-07 1539
查阅网上资源和博客，全部是在原生的基础上一点一点的加文件实现使原生项目变成React Native项目，步骤较多，比较复杂，容易出现各种问题，对于项目不是很大，文件目录不是过于复杂的原生项目尝试利用先新建React Native项目，然后将原生代码集成进去的办法(基于Android平台、IOS类似)。 一、打开现有项目 利用Android Studio打开现有原生项目，如下图所示。
react native 引用第三方组件方法
clf_programing
02-27 1019
react native 引用第三方组件方法有关react native在GitHub上面的组件已经很多了，引用这些组件可以省去我们开发时耗费的时间和精力，下面那就介绍一下引用第三方组价的方法：1. 在github或者js.coach上面找到自己需要的组件，一般在readme都会有使用相应组件的使用和引用方法。2. 在自己项目根目录下 运行以下命令：    npm install 组件名称 --s...
react native 引入第三方组件常见问题分析
未金涛的博客
03-12 701
前言 react native 是Facebook开源的一款用于开发跨平台APP的框架。由于，官方给到的组件有限。在开发过程中我们会使用到一些第三方开源的组件。这个时候会遇到一个特别恶心的问题，就是第三方组件和reac native框架版本不匹配的问题。下面以我在Android开发下引入组件做为例子，阐述说明其中会遇到的问题。 引入组件 在引入一个第三方组件时。一般来说是有3个步骤的：第一步安装，第二步链接组件，第三步在AndroidManifest.xml里配置相应的权限。 安装 npm inst
React-Native到0.44版本后Navigator 不能用的问题
Keep_Moving31038的博客
05-18 7844
报错：'Navigator is deprecated and has been removed from this package. It can now be installed ' +            'and imported from `react-native-deprecated-custom-components` instead of `react-native`. '
react native对接Android原生模块SDK
m0_59162559的博客
04-30 1053
对接原生模块方面，其实官网讲得已经非常详细了，这里不多做赘述，详情[点击这里](https://www.reactnative.cn/docs/native-modules-android) 虽然详细，但是还是得补充一些点，如下： 1、创建自定义原生模块文件之前需要先将自己的sdk放置在/android/app/libs下(如果没有libs，则需要新建该文件夹,然后将sdk放进去） 2、修改/android/app/build.gradle文件，添加如下配置
React Native Navigator 被舍弃解决办法
xinganbu124的博客
07-25 715
React Native Navigator被舍弃解决办法 Facebook 在 React Native 0.44的时候将Navigator舍弃掉，推荐使用 react-Navigator ，但有一些老的项目已经使用了Navigator就不好迁移到react-Navigator 。所以在这里记录一下解决办法。Facebook 将舍弃组件都放在一个叫react-native-deprecated-
探索React Native的高效键盘工具：`react-native-keyboard-accessory`
gitblog_00091的博客
04-17 377
探索React Native的高效键盘工具：react-native-keyboard-accessory react-native-keyboard-accessoryA React Native Keyboard Accessory (View, Navigation) Component. Sticky views on keyboard.项目地址:https://gitcode.com/...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值