Question

我只想使用KeyboardAwareScrollView而不在IOS上使用任何功能，并且在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
  >

Answer 1

您可以同时使用JSX prop扩展和三元表达式：

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

我强烈建议您不要全部内联执行此操作，因为这很难阅读。您可以使用Platform.select进行一些可读性（和声明性的）操作：

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

Answer 2

您还可以通过节点进行检查，但是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

Answer 3

此语法对我有用：

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

  render = () => (

    <KeyboardAvoidingView 
      {...this.keyboardProps}
    >

Answer 4

在{}内的Ternary Condition中使用括号return ()

因此您的代码如下：

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上工作

证明：

Answer 5

要向iOS添加键盘感知功能，请添加

  pod 'IQKeyboardManager'

在podfile中并在ios文件夹中运行pod install。它将在您的iOS应用中启用IQkeyboard，并将您从麻烦中解救出来。

Gotcha：如果要重置ios项目的方式，则可能必须重新添加pod文件。

Answer 6

如果您想使代码更简单，更清晰易懂，请执行以下操作：例如，如果要为每个特定的操作系统指定特定的“ 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访问此网站以获取更多信息。

Answer 7

尝试一下，

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()}
 )
}

如何使用Platform.OS来响应本机中的元素？

7 个答案: