如何将 Platform.OS 用于反应原生的元素？答案

【问题标题】：How to use Platform.OS to elements in react native?如何将 Platform.OS 用于反应原生的元素？
【发布时间】：2018-07-20 07:04:26
【问题描述】：

我只想在 IOS 上使用没有任何功能的 KeyboardAwareScrollView，下面给出了适用于 android 的代码。

我知道我需要使用 Platform.OS === 'ios' ？：

但我不明白如何实现它。请帮帮我

render(){
 return(

    <KeyboardAwareScrollView
       extraScrollHeight={100}
       enableOnAndroid={true}
       keyboardShouldPersistTaps='handled'
    >
      <TextInput
        style={styles.inputContainerStyle}
        label="Username"
        value={this.state.username}
        onChangeText={username => this.setState({ username })}
      />
    </KeyboardAwareScrollView>
   )
}

我在下面尝试过：（但它不起作用）

<KeyboardAwareScrollView
      Platform.OS === 'android' ? 
      (
         extraScrollHeight={100}
         enableOnAndroid={true}
         keyboardShouldPersistTaps='handled'
      ) : null
  >

【问题讨论】：

你可以在这里得到答案in this question

标签： react-native platform

【解决方案1】：

您也可以通过节点检查，但 react-native 提供了一些检查平台的方法。

推荐这个

 import {Platform} from 'react-native';
    st styles = StyleSheet.create({
      container: {
        flex: 1,
        ...Platform.select({
          ios: {
            backgroundColor: 'red',
          },
          android: {
            backgroundColor: 'blue',
          },
        }),
      },
    });

你也可以使用三元表达式

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

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

Read this

【讨论】：

【解决方案2】：

你可以同时使用 JSX 属性传播和三元表达式：

<KeyboardAwareScrollView
  {
    ...(Platform.OS === 'android' ? 
    { 
      extraScrollHeight={100}
      enableOnAndroid={true}
      keyboardShouldPersistTaps='handled'
    } : {})
  }
>

我强烈建议不要全部内联，因为它很难阅读。您可以使用Platform.select 做一些可读性（和声明性）的事情：

const keyboardProps = Platform.select({
  android: { … },
  ios: {},
});
…
<KeyboardAwareScrollView {...keyboardProps}>

【讨论】：

我应该在哪里添加 const keyboardProps ？在类声明之前？课内？还是在 return 语句中？
第一个代码无法读取高度100，snack.expo.io/Hkd-9MkEQ，您可以在这里查看
@JustAhead 你需要添加开始标签。

【解决方案3】：

如果您想让您的代码更简单、更易于理解，请执行以下操作：例如，如果您想为每个特定操作系统指定特定的“marginTop”。你可以这样做：

 <View style={{justifyContent:'center',marginTop:Platform.select({
            ios: '30%', //30 percent of margin is applied to IOS
            android:'10%', // 30 percent of margin is applied to Andriod

          })}}>

通过 React-native 访问此网站：https://reactnative.dev/docs/platform-specific-code 了解更多信息。

【讨论】：

【解决方案4】：

这个语法对我有用：

 keyboardProps = Platform.select({
    android: {
      enabled: true,
      keyboardVerticalOffset: 0
    },
    ios: {
      enabled: true,
      keyboardVerticalOffset: 64,
      behavior: 'height',
    },
  });

  render = () => (

    <KeyboardAvoidingView 
      {...this.keyboardProps}
    >

【讨论】：

【解决方案5】：

试试这个，

renderKeyboardAwareScrollView(){
  if(Platform.OS === 'ios'){
    return (
       <KeyboardAwareScrollView
       extraScrollHeight={100}
       enableOnAndroid={true}
       keyboardShouldPersistTaps='handled'
    >
      <TextInput
        style={styles.inputContainerStyle}
        label="Username"
        value={this.state.username}
        onChangeText={username => this.setState({ username })}
      />
    </KeyboardAwareScrollView>
    )
  } else {
    return (
      <TextInput
        style={styles.inputContainerStyle}
        label="Username"
        value={this.state.username}
        onChangeText={username => this.setState({ username })}
      />
    )
  }
}
render(){
 return(
  {this.renderKeyboardAwareScrollView()}
 )
}

【讨论】：

【解决方案6】：

在return () 内使用括号{} 表示Ternary Condition

所以你的代码看起来像：

render(){
 return(
 <View>
 { ...Platform.OS === 'android' 
    ? //if true
    <KeyboardAwareScrollView
       extraScrollHeight={100}
       enableOnAndroid={true}
       keyboardShouldPersistTaps='handled'
    />
    : //if false
    <KeyboardAwareScrollView
      //your props for else condition
    />
    // or add null if you don't want to add another
 }
      <TextInput
        style={styles.inputContainerStyle}
        label="Username"
        value={this.state.username}
        onChangeText={username => this.setState({ username })}
      />
  </View>
   )
}

已编辑：

添加spread notation(...) 使其在Platform.OS 工作

证明：

【讨论】：

你能检查一下吗，上面写着未终止的 JSX 内容snack.expo.io/HJWSdM1NQ
@JustAhead 如果您不需要处理 iOS KeyboardAwareScrollView 只需使用 null snack.expo.io/Bked2KMkNQ
@JustAhead 这是一个fixing，你不能把组件的closed tag放在{}之外
@flix 呵呵，你说得对，它确实有效。似乎 Babel 正在克隆元素，但很难阅读 IMO。但是你的第一个例子不起作用。三元后不能有相邻标签，Babel 无法解析。
@Li357 我不知道代码，我只是从现有代码中添加我的代码，但你是对的，应该删除底部的第三行 (</KeyboardAwareScrollView>)工作，

【解决方案7】：

为了将键盘感知添加到 React Native 应用程序的 iOS 部分，只需添加

  pod 'IQKeyboardManager'

在 podfile 中并在 ios 文件夹中运行 pod install。它将在您的 iOS 应用程序中启用 IQkeyboard，让您免于烦恼。

问题：如果您的 ios 项目被重置，您可能需要重新添加 pod 文件。

【讨论】：