Question

这是我的组件A：

const GenericTextInput = (props) => {
  return (
      <TextInput
        style={styles.input}
        {...props}
      />
  );
};

这是我的组件B：

const SignIn = (props) => {
   return (
      <View>
        <GenericTextInput
                    placeholder="Email"
                    autoFocus={true}
                    keyboardType="email-address"
                    returnKeyType="next"
                    autoCorrect={false}
                    placeholderTextColor='rgba(250,248,244, .4)'
                    underlineColorAndroid='rgba(250,248,244, .7)'
        />

        <GenericTextInput
                    placeholder="Password"
                    placeholderTextColor='rgba(250,248,244, .4)'
                    underlineColorAndroid='rgba(250,248,244, .7)'
                    secureTextEntry={true}
        />
    </View>
   );
};

我想在我的组件B 中为第二个GenericTextInput添加特定样式。在组件A 中我想使用spread operator（非常方便）。

如果我只是做：

//component A

const GenericTextInput = (props) => {
  return (
      <TextInput
        style={[styles.input, props.styles]}
        {...props}
      />
  );
};


//component B

    const SignIn = (props) => {
       return (
          <View>
            <GenericTextInput
                        placeholder="Email"
                        autoFocus={true}
                        keyboardType="email-address"
                        returnKeyType="next"
                        autoCorrect={false}
                        placeholderTextColor='rgba(250,248,244, .4)'
                        underlineColorAndroid='rgba(250,248,244, .7)'
            />

            <GenericTextInput
                        placeholder="Password"
                        placeholderTextColor='rgba(250,248,244, .4)'
                        underlineColorAndroid='rgba(250,248,244, .7)'
                        secureTextEntry={true}

                        style={styles.customStyleForSecondInput}
            />
        </View>
       );
    };

我在 comp中有2 style props。一个，第二个style prop将完全覆盖第一个。

在第二个GenericTextInput添加特定样式的正确方法是什么？

Answer 1

我通常会为对象解析命名属性（style），并使用rest运算符将剩余的道具收集到一个新对象中：

const {style, ...rest} = props;

return (
  <TextInput
    style={[styles.input, style]}
    {...rest}
  />
)

请注意，这需要transform-object-rest-spread Babel插件。此插件包含在React Native Babel预设中，因此它可以开箱即用 - 但如果没有此插件，可能无法在其他JavaScript环境中使用。

Answer 2

如果您希望自定义样式完全覆盖预设样式，我相信您可以执行类似

的操作

style={props.style || styles.input}

但我想你问的是如何让自定义样式覆盖一些预设样式。在那种情况下，它将是

style={[styles.input, props.style]}

因为你把房产作为'风格'而不是'风格'，你只需将它们放在最后。

React Native：在子组件

2 个答案: