Question

我正在尝试使用以下样式

自定义TouchableOpacity

<TouchableOpacity
  onPress={() => {
    navigate("EnableNotification");
  }}
>
  <View
    style={{
      backgroundColor: "#FE434C",
      alignItems: "center",
      justifyContent: "center",
      borderRadius: 10,
      width: 240,
      marginTop: 30,
      height: 40
    }}
  >
    <Text style={{ color: "white" }}>CONTINUE</Text>
  </View>
</TouchableOpacity>

我在每个组件中都有TouchableOpacity。我希望在一个js文件中自定义这个视图。重用这个。无论我想在哪里使用，只需实施onPress和Text即可。我怎样才能做到这一点？

Answer 1

这是我创建的其中一个按钮的片段。 textStyle＆amp; buttonStyle都被排除在此组件中，但是如果您希望它们是可变的，则会将其传递给RoundButton = ({ textStyle, buttonStyle })

const RoundButton = ({ onPress, children }) => {

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

这是一个用例：

<RoundButton onPress={this.onSubmit.bind(this)>Confirm</RoundButton>

所以，你可以去：

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

  return (
    <TouchableOpacity onPress={onPress} style={styles.button}>
      <Text style={{ color: '#fff' }}>{buttonText}</Text>
    </TouchableOpacity>
  );
};

const styles = {
  backgroundColor: '#FE434C',
  alignItems: 'center',
  justifyContent: 'center',
  borderRadius: 10,
  width: 240,
  marginTop: 30,
  height: 40,
}

然后import { Button } from '../somepath/Button.js;

它将是一个可用的自定义JSX元素。

return (
...

<Button onPress={() => navigate('EnableNotification'}>CONTINUE</Button>

...
)

编辑：传递样式的更新：

const Button = ({ onPress, buttonText, buttonStyle, textStyle }) => {

      return (
        <TouchableOpacity onPress={onPress} style={buttonStyle}>
          <Text style={textStyle}>{buttonText}</Text>
        </TouchableOpacity>
      );
    };

您的使用案例将是：

import { Button } from '../somepath/Button.js';

class MyPage extends Component {
  render() {
    return (
      ...
      <Button buttonStyle={styles.yourStyle} textStyle={styles.yourStyle2} onPress={() => navigate('EnableNotification')>CONTINUE</Button>
      ...
    )
  }
}

const styles = {
  yourStyle: {
    ...
  }

  yourStyle2: {
    ...
  }
}

如何自定义TouchableOpacity并在每个组件中重用

1 个答案: