ReactbackgroundImage不會顯示在手機上，但會顯示在網路上-有解無憂

我將 backgroundImage 設定為 url 并且它在 web 視圖中正確顯示但是當我嘗試在我的 Android 手機上查看它時（因為它是一個應用程式），backgroundImage 不知何故不顯示？它只是顯示一個白屏。我不確定為什么只有在手機上查看時才會發生這種情況。我已經嘗試下載影像并使用 require 從我的源檔案夾中訪問它，但它仍然只顯示在 web 視圖中并且不顯示在我的手機上。我正在使用 expo.dev 在我的手機上查看。我正在使用道具為背景影像分配影像資料。

const data = [
  { title: "Joe's Gelato",
    tagline: "Dessert, Ice cream, ￡￡￡",
    eta: "10-30",
    imgUri: ("https://images.unsplash.com/photo-1572307230741-453859592dce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=800")
  }
];

function HomeScreen({ navigation }) {

  const HomescreenCell = (props) => (
    <Cell
      {...props}

      onPress={() => navigation.navigate('Menu')}

      cellContentView={
        <View style={{ flex: 1, backgroundImage: `url("${props.imgUri}")`, backgroundSize: "cover" }}>
          <View>
            <Text style={{
              fontWeight: "bold",
              fontFamily: "Trebuchet MS",
              color: "#FFC613"
            }}>
            {props.title}
            </Text>
            <Text style={{
              fontFamily: "Noto Sans",
              color: "#FFF2D8"
            }}>
            {props.tagline}
            </Text>
          </View>
        </View>
      }
    />
  )
  return (
    <ScrollView>
       {
         <View>
           <TableView>
              <Section header="HomeScreen" hideSeparator="true" separatorTintColor="#ccc">
                {data.map((item, index) =>
                    <HomescreenCell key = {item.title}
                      title= {item.title}
                      tagline= {item.tagline}
                      eta= {item.eta}
                      imgUri= {item.imgUri}
                    />
                )}
              </Section>
           </TableView>
         </View>
       }
    </ScrollView>
  );
}

uj5u.com熱心網友回復：

我不認為backgroundImagereact-native 支持 View Style Prop。至少我在這個檔案中找不到它。嘗試改用ImageBackground

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486057.html

標籤：安卓反应反应式背景图片

上一篇：ReactNative，在回傳中創建一個if回圈

下一篇：如何在呼叫API時使用狀態