React Native 标签栏使 android 应用程序崩溃

Question

这是创建组件和标签栏的代码

const Tab = createMaterialTopTabNavigator<DownloadLedgerNavigatorParamList>()

function HomeScreen() {
  return (
    <View style={{ marginTop: 10, padding: 20 }}>
      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
            Material Goods
      </Text>
      <Text style={{ color: '#00B256', marginTop: 10 }}>
            Note: 
      </Text>
      <Text style={{ fontSize: 17, marginTop: 20 }}>
            Select Date Range
      </Text>
      <View style={{ borderWidth: 1, borderColor: '#A0AEC0', height: 40, marginTop: '10' }}>
        <Text>Select Date</Text>
      </View>
    </View>
  )
}

function SettingsScreen() {
  return (
    <View>
      <Text>Settings Screen</Text>
    </View>
  )
}

现在当调用主屏幕时，应用会崩溃

export function DownloadNavigator() {
  return (
    <>
      <AppGradient style={GRADIENT} />
      <Tab.Navigator>
        <Tab.Screen name="Aaa" component={HomeScreen} />
        <Tab.Screen name="Bbb" component={SettingsScreen} />
      </Tab.Navigator>
    </>
  )
}

但是，如果我在两个组件中都调用设置屏幕，则它工作正常。问题仅出在主屏幕上。这是一个错误吗？

export function DownloadNavigator() {
  return (
    <>
      <AppGradient style={GRADIENT} />
        <Tab.Navigator>
          <Tab.Screen name="Aaa" component={SettingsScreen} />
          <Tab.Screen name="Bbb" component={SettingsScreen} />
        </Tab.Navigator>
    </>
  )
}

Answer 1

在主屏幕上试试这个。我不认为你可以添加你试图添加到文本组件的样式。所以我建议将它们分层放置在视图组件中。同样在最后一个视图组件中，您将 marginTop: '10' 写为字符串，而不是数字。

<View style={{ marginTop: 10, padding: 20 }}>
      <Text>
            Material Goods
      </Text>
      <View style = {{marginTop: 10}}>
      <Text style={{ color: '#00B256'}}>
            Note: 
      </Text>
      </View>
      <View style = {{marginTop: 20}}>
      <Text style={{ fontSize: 17}}>
            Select Date Range
      </Text>
      <View style={{ borderWidth: 1, borderColor: '#A0AEC0', height: 40, marginTop: 10 }}>
        <Text>Select Date</Text>
      </View>
    </View>

React Native 标签栏使 android 应用程序崩溃

React Native Tab bar crashes the android app

react-native

react-navigation