typescript - 图像源(远程 URL 或本地文件资源)

Question

你好我是本地人 react 的新手我在将 imageURL 作为 Prop 传递时遇到问题我有一个入职组件，其中有一个图像标签我想将图像作为 Prop 传递到这里但我面临问题我在我的项目中使用 typescript 这里是我的入职组件

const OnBoarding: React.FC<{imageUrl: string}> = (imageUrl) => {
  return (
    <View style={styles.container}>
      <View style={styles.subContainer}>
        <View style={styles.skipContainer}>
          <Image style={{width:150, height:150}} source={{ uri: imageUrl }} />
        </View>
        <View style={styles.nextContainer}>
          <View>
            <Tittle />
            <View style={styles.paragraphSec}>
              <SubTittle />
            </View>
            <View
              style={{
                flexDirection: 'row',
                width: '15%',
                justifyContent: 'space-between',
                marginTop: 12,
              }}>
              <View style={styles.swipe}></View>
              <View style={styles.swipe}></View>
              <View style={styles.swipe}></View>
            </View>
          </View>
          <View style={styles.nextButton}>
            <View style={styles.circle}>
              <Text style={styles.next}>Next</Text>
            </View>
          </View>
        </View>
      </View>
    </View>

这是我的 app.tsx 文件，我在其中导入 onBoarding 组件，我是 typescript 的新手

const App: React.FC<{}> = () => {
  return (
      // <WelcomeScreen />
      <OnBoarding imageUrl={require("../assets/blur.png")}/>
  );
};

Answer 1

为此，您需要通过具体检查是否具有远程URI的条件来传递来自App本身的图像源。

const App: React.FC<{}> = () => {
const imageSource = isHavingRemoreURI ? {uri: https://remoteURI} : require("../assets/blur.png");
  return (
      // <WelcomeScreen />
      <OnBoarding imageUrl={imageSource}/>
  );
};

用法如:

...
<View style={styles.skipContainer}>
   <Image style={{width:150, height:150}} source={imageUrl} />
</View>
...