在 React Native 中将基本 url 添加为 src

在 React Native 中，我们可以使用 Image 和 WebView 组件来加载图片和网页。这些组件都需要一个 source 属性来指定加载的资源的 url。在开发过程中，通常有一个基本 url，我们需要将其添加到每个资源的 url 上。本文将介绍如何在 React Native 中将一个基本 url 添加为 source 属性的值。

方法一：在组件中添加基本 url

首先，我们可以在组件的 state 中添加一个变量来存储基本 url。然后，我们可以在 render 方法中使用模板字符串来拼接完整的 url。

import React, { Component } from 'react';
import { Image } from 'react-native';

class MyImage extends Component {
  state = {
    baseUrl: 'https://example.com/images/',
  };

  render() {
    const { imageUrl } = this.props;
    const { baseUrl } = this.state;

    return (
      <Image
        source={{ uri: `${baseUrl}${imageUrl}` }}
        style={{ width: 100, height: 100 }}
      />
    );
  }
}

在上面的代码中，我们创建了一个名为 MyImage 的组件，它接受一个名为 imageUrl 的 prop，用于指定图片的相对路径。我们在组件的 state 中添加了 baseUrl 变量，用于存储基本 url。在 render 方法中，我们使用模板字符串来将 baseUrl 和 imageUrl 拼接成完整的 url，并将其作为 source 属性的值传递给 Image 组件。

方法二：使用 Context

另一种添加基本 url 的方法是使用 React 的 Context API。我们可以创建一个名为 BaseUrlContext 的 Context，用于存储基本 url。然后，我们可以在需要使用 source 属性的组件中使用 BaseUrlContext.Consumer 来获取基本 url 并将其添加到 source 属性的值中。

import React, { Component, createContext } from 'react';
import { Image } from 'react-native';

const BaseUrlContext = createContext('https://example.com/images/');

class MyImage extends Component {
  render() {
    const { imageUrl } = this.props;

    return (
      <BaseUrlContext.Consumer>
        {(baseUrl) => (
          <Image
            source={{ uri: `${baseUrl}${imageUrl}` }}
            style={{ width: 100, height: 100 }}
          />
        )}
      </BaseUrlContext.Consumer>
    );
  }
}

class App extends Component {
  render() {
    return (
      <BaseUrlContext.Provider value="https://example.com/images/">
        <MyImage imageUrl="example.jpg" />
      </BaseUrlContext.Provider>
    );
  }
}

在上面的代码中，我们创建了一个名为 BaseUrlContext 的 Context，并将其初始化为 https://example.com/images/。在 MyImage 组件中，我们使用 BaseUrlContext.Consumer 来获取基本 url，并将其与 imageUrl 拼接成完整的 url。在 App 组件中，我们使用 BaseUrlContext.Provider 来将基本 url 传递给子组件。

结论

添加基本 url 可以方便地在 React Native 中加载图片和网页。我们介绍了两种添加基本 url 的方法：在组件中添加基本 url 和使用 Context。方法一比较简单，适合只有少量组件需要添加基本 url 的情况，而方法二则更加灵活，适合多个组件需要添加基本 url 的情况。