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

对于次要平台特定的代码，您可以使用平台模块执行一些与平台相关的代码。如这里的文档详细介绍： https://facebook.github.io/react-native/docs/platform-specific-code.html 样式表中的平台条件语句（react-native）

还有就是如何在样式表

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

使用它的一个例子，我想这样做类似的，但一个简单的东西，如果语句来决定是否要使用一种风格，例如仅适用于一个平台的风格。

下面是一个例子：

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

这是语法不正确的，什么是正确的代码来实现这一目标。我想避免为每个平台提供两个单独的样式表，因为它只有1或2个字段是不同的。

来源

2016-03-10 Mark Silver

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

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

    } 
    });

来源

2016-03-10 14:19:08

我和中等规模的RN应用程序有同样的问题。

目前，我有用于iOS和Android的外部样式表（Layout.ios.js和Layout.android.js），我将其导入组件。这是为了组件的基本造型而设计的，它不像听起来那样难以维护。

Android上有几个小问题（例如lineHeight在某些情况下导致死亡的红色屏幕）。这就是为什么我必须实施这种方法，我对此感到满意。

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

但是在我只有很小的区别的情况下，

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

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

另外，textAlignVertical被iOS忽略，所以你不需要用平台检查来包装它。

来源

2016-03-10 14:20:05 zvona

请看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%' 
     } 
    } 
});

来源

2016-04-28 11:00:25 vitalets

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

回答

相关问题