Question

对于次要平台特定代码，您可以使用Platform模块执行一些与平台相关的代码。详情请参阅此处的文档： https://facebook.github.io/react-native/docs/platform-specific-code.html

有一个如何在样式表中使用它的例子

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

我想做一些类似但只是简单的if语句来决定是否使用样式，例如仅适用于一个平台的样式。

以下是一个例子：

var styles = StyleSheet.create({
   textInputStyle: {
      if (Platform.OS === 'android') {
         textAlignVertical:'top' // android only style
      }
   }
});~

这在语法上是不正确的，实现这一点的正确代码是什么。我想避免为每个平台设置两个单独的样式表，因为当它只有1个或2个不同的字段时似乎是不必要的。

Answer 1

请查看支持媒体查询的react-native-extended-stylesheet ，以便为特定平台/屏幕定义样式。

例如：

import EStyleSheet from 'react-native-extended-stylesheet';

...

render() {
  return (
    <View style={styles.column}></View>
  );
}

...

const styles = EStyleSheet.create({
    '@media ios': {
      column: {
        width: '80%'
      }
    },
    '@media android': {
      column: {
        width: '90%'
      }
    }
});

您也可以将它用于特定样式项目：

const styles = EStyleSheet.create({
   column: {
      '@media ios': {
         width: '80%'
      },
      '@media android': {
         width: '90%'
      }
   }
});

Answer 2

实现的一种方法是同时拥有不同的样式，然后在渲染中动态应用它。例如：

render(){
  let platformStyle = Platform.OS === 'ios' ? styles.iosStyle: styles.androidStyle;
  return (<View style={platformStyle}>
          .....
          </View>);
  }
  .....
  const styles = StyleSheet.create({
    iosStyle: {
    },
    androidStyle: {

    }
  });

Answer 3

我相信这就是您想要的：

var styles = StyleSheet.create({
   textInputStyle: {
      ...Platform.select({
        ios: {
            //
        },
        android: {
            //
        },
    }),
   }
})

您提供的link以上述代码为例。（v0.59）

Answer 4

我对中型RN应用程序的问题与你相同。

目前，我有iOS和Android（Layout.ios.js和Layout.android.js）的外部样式表，我将其导入到组件中。这适用于组件的基本样式，并且不像听起来那样难以维护。

Android上存在一些小问题（例如，在某些情况下，lineHeight导致红屏死机）。这就是为什么我必须实施这种方法并且我对此感到满意。

除了大多数组件共享通用样式外，因此外部样式表在这种情况下也能很好地工作。

但是在我只有微小差别的情况下，我会在本地进行，例如

header: {
  marginTop: (Platform.OS === 'ios') ? 20 : 15
}

我试图寻找替代方法，但目前这似乎是这样做的方式。

此外，iOS会忽略textAlignVertical，因此您无需使用平台检查进行包装。

样式表中的平台条件语句（react-native）

4 个答案: