Native Base 按钮缺少样式

Question

我有一个 native-base 应用程序，样式有效，但按钮似乎部分缺失。没有错误，我没有在我的应用程序中应用任何自定义样式。

请参见下面的屏幕截图。这些按钮缺少字体颜色、填充，也许还有其他一些东西。这适用于任何按钮类型（透明、边框等）

我正在用简单的

渲染按钮

<Card onPress={console.log("hello") && this.props.navigation.navigate('Game')} key={game.location}>
  <CardItem header>
    <Left>
      <Icon name="ios-game-controller-a" />
      <Body>
        <Text>{game.location}</Text>
        <Text>Stations: {game.stationsCount}</Text>
      </Body>
    </Left>
    <Right>
      {this.gameStatus(game)}
    </Right>
  </CardItem>
  <CardItem>
    <Button primary block><Text>Join Game</Text></Button>
  </CardItem>
</Card>

知道为什么不应用某些样式吗？

Answer 1

如果您的 Button 来自 import { Button } from 'react-native'，则您无法设置样式。该组件为基于平台的默认样式。

这里来自官方文档：(https://facebook.github.io/react-native/docs/button.html)

If this button doesn't look right for your app, you can build your own button using TouchableOpacity or TouchableNativeFeedback. For inspiration, look at the source code for this button component. Or, take a look at the wide variety of button components built by the community.

您可以按照以下示例拥有自己的样式按钮：https://facebook.github.io/react-native/docs/touchableopacity.html

Answer 2

在对齐组件时，您需要使用 <Left>、<Body> 和 <Right>

Answer 3

我一直遇到这个问题 - 确保您从 native-base 导入 <Text> 和 <View> 而不是 react-native。

Native Base 按钮缺少样式

Native Base button missing styling

css

react-native

native-base

Native Base 按钮​​缺少样式

Native Base button missing styling

css

react-native

native-base

Native Base 按钮缺少样式