Question

让我们想象一下我有一个按钮组件。我可以从不同的屏幕导入它，它独立运作。我可以给它不同的孩子（文字，图片，文字+图标，图标等）。

这看起来像是这样的：

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

import theme from '$/theme';

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'red',
  },
  text: {
    fontFamily: 'Nunito',
    color: 'white',
  },
  icon: {
    color: 'grey',
  }
});

export default (props) => (
  <TouchableOpacity {...props} style={styles.button}>
    {props.children}
  </TouchableOpacity>
);

然后

// I want to be able to do either without having to style Text/Icon each time
const button1 = <Button><Text>Click</Text></Button>
const button2 = <Button><Icon name="back" /></Button>

我想直接在Button Component中定义图标，文本等样式，对吗？当孩子出现时，是否可以将styles.text变量传递给Text组件？想象一下图标，图像等等？

我觉得每次都是一个好习惯，不必满足孩子的风格。然而，我可以使用<Button text={'Click'} />语法然后播放if / else语句，但我不喜欢传递内容的属性。

Answer 1

只需将文字或图标作为道具传递到Button组件

即可

export default (props) => (
  <TouchableOpacity {...props} style={styles.button}>
    {props.title && <Text style={styles.text}>{props.title}</Text>}
    {props.icon && <Icon name={props.icon} />}
  </TouchableOpacity>
);

或者创建ButtonText和ButtonIcon组件。

Answer 2

我们为React Native提供了一个很好的Essential跨平台UI组件，名为nativebase.io，它有一个简单而完整的组件。使用nativebase.io，我们可以制作像HTML一样的组件。例如这段代码：

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'red',
  }
});

export default (props) => (
  <TouchableOpacity {...props} style={styles.button}>
    {props.children}
  </TouchableOpacity>

现在它：

<Button><Text>Click</Text></Button> //without any const

Tabs Header Body Icon和...等完整组件存在于nativeBase的文档中。

祝你好运

Answer 3

您可以使用item_1

React.cloneElement

但这就是如果您想使用相同的样式而不管组件的类型如何。它将同时使向下传递的图标和文本变为灰色。

React Native：造型props.children

3 个答案: