react-native – 如何使用Platform.OS来反应原生元素？

发布时间：2020-12-15 09:31:43 所属栏目：百科来源：网络整理

导读：我想在 IOS上使用没有任何功能的KeyboardAwareScrollView,并给出下面的 android代码. I know that I need to use Platform.OS === ‘ios’ ? : BUT I DON’T UNDERSTAND HOW TO REALISE IT. Please help me render(){ return( KeyboardAwareScrollView extra

我想在 IOS上使用没有任何功能的KeyboardAwareScrollView,并给出下面的 android代码.

I know that I need to use Platform.OS === ‘ios’ ? :

BUT I DON’T UNDERSTAND HOW TO REALISE IT. Please help me

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

What I’ve tried below: (But it doesn’t work)

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

解决方法

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

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

我强烈建议不要这样做所有内联,因为它很难阅读.你可以使用Platform.select做一些有点可读(和声明)的事情：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!