更新 属性 'borderStyle' 管理的视图时出错：RCTView java.lang.String 无法转换为 java.lang.Double

Question

有人可以帮我吗？ 我正在为其使用 React Native Expo SDK 42，它仅在 android 上显示此错误。 我的 iOS 设备没有错误。我尝试了所有方法，例如添加 Overflow: "hidden" 但仍然没有用。

不知道这个错误发生在哪里。我认为它在投资组合部分，但我认为那里没有问题。

import { ScrollView, StyleSheet, Text, View } from "react-native";
import { StatusBar } from "expo-status-bar";
import { SafeAreaView } from "react-native-safe-area-context";
import StockListItem from "../components/StockListItem";

import { useBottomTabBarHeight } from "@react-navigation/bottom-tabs";

const Home = () => {
  const tabBarHeight = useBottomTabBarHeight();
  return (
    <SafeAreaView style={[styles.container, { paddingBottom: -tabBarHeight }]}>
      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={styles.contentContainer}
        style={styles.scollContainer}
      >
        <View style={styles.portfolio}>
          {/* Money */}
          <View style={styles.moneyContainer}>
            <View style={styles.invested}>
              <Text style={styles.moneyText}>Invested</Text>
              <Text style={styles.moneyNumber}>10,000</Text>
            </View>
            <View style={styles.current}>
              <Text style={styles.moneyText}>Current</Text>
              <Text style={styles.moneyNumber}>10,000</Text>
            </View>
          </View>
          {/* Underline */}
          <View
            style={{
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "center",
              width: "90%",
            }}
          >
            <View
              style={{
                flex: 1,
                height: 2,
                borderRadius: "50%",
                backgroundColor: "#808080",
              }}
            />
          </View>
          {/* Profit */}
          <View style={styles.profitContainer}>
            <View style={styles.profit}>
              <Text style={styles.profitText}>P&L</Text>
            </View>
            <View style={styles.profitValue}>
              <Text style={styles.profitNumber}>+10,000</Text>
            </View>
          </View>
        </View>

        <StockListItem />
      </ScrollView>
      <StatusBar style="light" />
    </SafeAreaView>
  );
};

export default Home;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#161616",
    alignItems: "center",
    justifyContent: "center",
  },
  scollContainer: {
    width: "100%",
  },
  contentContainer: {
    alignItems: "center",
    justifyContent: "center",
  },
  portfolio: {
    marginTop: 10,
    height: 150,
    width: "90%",
    backgroundColor: "#242424",
    borderRadius: 10,
    overflow: "hidden",
    alignItems: "center",
    justifyContent: "center",
  },
  moneyContainer: {
    flex: 2,
    width: "90%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
  invested: {
    width: "50%",
  },
  current: {
    width: "50%",
  },
  moneyText: {
    color: "#808080",
    fontSize: 18,
    fontWeight: "500",
  },
  moneyNumber: {
    color: "#ffffff",
    fontSize: 24,
    fontWeight: "500",
  },
  profitContainer: {
    flex: 2,
    width: "90%",
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center",
  },
  profit: {
    width: "50%",
  },
  profitValue: {
    width: "50%",
  },
  profitText: {
    color: "#808080",
    fontSize: 18,
    fontWeight: "500",
  },
  profitNumber: {
    color: "green",
    fontSize: 24,
    fontWeight: "500",
  },
});```

Answer 1

尝试使用不带引号的 50 :

            <View
          style={{
            flex: 1,
            height: 2,
            borderRadius: "50%", =>  borderRadius:50,
            backgroundColor: "#808080",
          }}
        />

还要注意错误，“java.lang.string 无法转换为 java.lang.Double” 表示您将字符串 ("50%") 转换为双精度（带点的数字，例如 1.0 ）

边框半径应为数字 - https://reactnative.dev/docs/view-style-props#borderradius