ListRow 的图标与文字之间没有分开

[zengqingsong]

我看了下你的源码：ListRow.js是这么处理图标的

//icon
if ((icon || icon === 0) && !React.isValidElement(icon)) {
  icon = (
    <View style={{paddingRight: Theme.rowIconPaddingRight}}>
      <Image style={{width: Theme.rowIconWidth, height: Theme.rowIconHeight}} source={icon} />
    </View>
  );
}

这样图标只能是图片的时候图标和标题文字之间的间隔 paddingRight 才器作用，
我用到矢量图标的时候出现问题
//导入图标字体，这里使用FontAwesome库
import Icon from 'react-native-vector-icons/FontAwesome';
但是我在图标的样式上增加style={{paddingRight:12}}可以解决，我想应该是你的代码的兼容性出了问题，希望能够纠正过来，要不每次每次都要修复这个小问题也挺麻烦的。

注：我用的是import {StackNavigator} from 'react-navigation';进行导航的，比较流畅一点。

具体代码如下

      <ListRow title='时光相册'
                     icon={<Icon name="info-circle" size={20} style={{paddingRight:12}}/>}
                     detail='时光相册'
                     onPress={() => this.navigator.push({view: <AboutScreen />})}/>

事实上没用你的库之前我是这么写的

<TouchableOpacity onPress={() => navigate('NewsDetail')} style={styles.itemContainer}> <Icon name="file-image-o" size={20}/> <Text style={styles.itemText}> 时光相册 </Text> <Icon name="chevron-right"/> </TouchableOpacity>

[rilyu]

从使用上来说这确实是个问题，不过Teaset的设计初衷就是这样的，就是传入element的属性能控制所有样式，所有的Teaset组件都是按这个方式实现的。

就这个问题来说，如果ListRow预设paddingRight=12，有两个方法可以实现：

• 把传入的element放到设置了paddingRight=12的View容器里

• 使用cloneElement为传入的element的style属性增加paddingRight=12

前者的问题是使用者不能指定别的paddingRight值，后者的问题是假定传入的element支持style，但不一定总是这样，这就是这个问题的原因。
你可以派生出一个新的类，在类内作易用性封装，可参照Example中的SelectRow实现：https://github.com/rilyu/teaset/blob/master/example/views/SelectRow.js