如何在React Native中为Android和iOS使用不同的样式？

Question

我想在iOS和Android上使用不同的样式，该怎么做呢？而且也许有人知道如何对TextInput进行样式设置，我只需要底部边框，但是borderBottomWidth不起作用。

- lymmight

Answer 1

有很多种方法可以实现这个目标。在您的情况下，最简单的方法是使用Platform.OS：

var {Platform} = React;

var styles = StyleSheet.create({
    height: (Platform.OS === 'ios') ? 200 : 100
});

- Emilio Rodriguez

---

请点击此处查看有关平台特定信息的React Native文档：https://github.com/emilioicai/react-native/blob/master/docs/PlatformSpecificInformation.md - Emilio Rodriguez

Answer 2

从https://facebook.github.io/react-native/docs/platform-specific-code，您可以使用Platform.select方法。 另外还有一个可用的Platform.select方法，它接收一个包含Platform.OS作为键的对象，并返回您当前运行平台的值。

import { Platform, StyleSheet } from 'react-native'

const styles = StyleSheet.create({
  container: {
    flex: 1,
    ...Platform.select({
      ios: {
        backgroundColor: 'red',
      },
      android: {
        backgroundColor: 'blue',
      },
    }),
  }
})

- onmyway133

Answer 3

import { Platform, StyleSheet } from 'react-native'

const styles = StyleSheet.create({
    logo: {
        width: (Platform.OS === 'ios') ? 80 : 100,
    }
});

- Adriano Gomes