如何在 react-native 上为 android 和 ios 使用不同的样式？

Question

I want to use different styles for ios and android, how can I do it? And maybe somebody know how to stylizing TextInput, I need only bottom border, but borderBottomWidth doesnt work.

Answer 1

There are many ways to achieve this. The simplest one in your case would be to use Platform.OS:

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

Answer 2

From https://facebook.github.io/react-native/docs/platform-specific-code , you can use Platform.select

There is also a Platform.select method available, that given an object containing Platform.OS as keys, returns the value for the platform you are currently running on.

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

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

Answer 3

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

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