Question

我正在使用KeyboardAvoidingView，我希望在平台是IOS的情况下将支持'行为'传递给它，如果它是android，则不会。我不想为同一个编写两个单独的JSX组件声明。有没有办法决定是否通过道具。反应本机的文档也没有提到行为道具的任何默认值，否则我可以有条件地设置。

Based on the platform the component should be declared the following way

FOR IOS
<KeyboardAvoidingView behavior="padding" style={modalContainer} >
  {this.props.children} //I've lots of children here and they're composed inside of the keyboardavoidingview and i'm not using this.props.children as they're in the same parent component
</KeyBoardAvoidingView>


FOR ANDROID
<KeyboardAvoidingView style={modalContainer} >
  {this.props.children}
</KeyBoardAvoidingView>

Answer 1

您可以通过传递value或undefined

来有条件地传递道具

<KeyboardAvoidingView behavior={platform="android"? "padding": undefined} style={modalContainer} >
  {this.props.children}
</KeyBoardAvoidingView>

Answer 2

你可以创建一个Higher Order Component的KeyboardAvoidingView并通过它传递平台道具。

function HOC() {
    return class PlatformSpecific extends React.Component {
        constructor(props) {
           super(props);
           if (Platform.OS === "ios") {
               this.state = { behavior: "padding" };
           } else this.state = {};
        }
        render() {
            return <KeyboardAvoidingView {...this.props} {...this.state}/>;
        }
    };
}

编辑：为什么要创建一个额外的HOC？因为它可以扩展。您甚至可以传递组件进行渲染，并使此HOC成为其他组件的额外用例。

function HOC(ComponentToRender) {
    return class PlatformSpecific extends React.Component {
        constructor(props) {
           super(props);
           if (Platform.OS === "ios") {
               this.state = { behavior: "padding" };
           } else this.state = {};
        }
        render() {
            return <ComponentToRender {...this.props} {...this.state}/>;
        }
    };
}

并像这样使用它：

const KeyboardAvoidingComponent = HOC(KeyboardAvoidingView);
const AnotherPlatformSpecificComponent = HOC(AnotherComponent)
// in render:
<KeyboardAvoidingComponent {...props} />
<AnotherPlatformSpecificComponent {...props} />

Answer 3

你可以做这样的事情是特定于平台的

<KeyboardAvoidingView behaviour={Platform.OS == "android" ? "padding" : undefined}  style={modalContainer} >
      {this.props.children} //I've lots of children here and they're composed 
    </KeyBoardAvoidingView>

或者你显然有这个选择。

{Platform.OS == "ios" && <KeyboardAvoidingView behavior="padding" style={modalContainer} >
  {this.props.children} //I've lots of children here and they're composed 
</KeyBoardAvoidingView>}


{Platform.OS == "android" && <KeyboardAvoidingView style={modalContainer} >
  {this.props.children}
</KeyBoardAvoidingView>}

Answer 4

有很多方法可以做到。

1

{Platform.select({
 ios: () => (
   <KeyboardAvoidingView behavior="padding">...</KeyboardAvoidingView>
 ),
 android: () => (
  <KeyboardAvoidingView>...</KeyboardAvoidingView>
 )
})()}

2

//keyboard.ios.js

export function Keyboard(props) {
 return (<KeyboardAvoidingView behavior="padding">
  {props.children}
 </KeyboardAvoidingView>);
}

//keyboard.android.js

export function Keyboard(props) {
 return (<KeyboardAvoidingView>
  {props.children}
 </KeyboardAvoidingView>);
}

// Main.js
import {Keyboard} from "./keyboard";
function Main (props) {
 return (
  <Keyboard>
   <Text>hello</Text>
  </Keyboard>
 );
}

如何动态决定是否将prop传递给react组件？

4 个答案: