javascript - 在 React-Native 中设置可重用组件的样式

Question

我制作了一个可重用组件 Button.js 并将其导入到两个不同的屏幕上。该按钮看起来相同，但在第一个屏幕上我需要它是 position: 'absolute' ，在第二个屏幕上我需要它是 position: 'relative' (默认)。

如何在第一个屏幕上添加绝对位置？我尝试在 FirstPage.js 上添加样式，但它不起作用。如何覆盖 Button.js 中定义的样式？

Button.js:

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

const Button = ({ position, onPress, children }) => {
  const { buttonStyle, textStyle } = styles;

    return (
        <TouchableOpacity onPress={onPress} style={buttonStyle, {'position': position}}>
            <Text style={textStyle}>{children}</Text>
        </TouchableOpacity>
    );
};

Button.defaultProps = {
  position: 'relative',
}

const styles = {
  textStyle: {
    alignSelf: 'center',
    color: '#F44336',
    fontSize: 16,
  },
  buttonStyle: {
    zIndex: 2,
    width: 100,
    backgroundColor: '#FFF',
  }
};

export { Button };

Answer 1

您可以传递 Prop ，如下所示(Button.js)(根据发布的代码进行编辑):

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';

const Button = ({ position, onPress, children }) => {
  const { buttonStyle, textStyle } = styles;
  const style = {...buttonStyle, position };
  return (
    <TouchableOpacity onPress={onPress} style={style}>
        <Text style={textStyle}>{children}</Text>
    </TouchableOpacity>
  );
};

Button.defaultProps = {
  position: 'relative',
}

const styles = {
  textStyle: {
    alignSelf: 'center',
    color: '#F44336',
    fontSize: 16,
  },
  buttonStyle: {
    zIndex: 2,
    width: 100,
    backgroundColor: '#FFF',
  }
};

export { Button };

您的按钮当然看起来不同，这只是您可以执行的操作的概述(基本上只是使用 Prop )。