ios - 如何在 React Native 中使用 UITableViewCellStyleSubtitle 获取原生 UITableView？

Question

我想用 React Native 构建这样的东西:

(图片来源https://developer.apple.com/design/human-interface-guidelines/ios/views/tables/)在 React Native 中如何做到这一点？我是否需要第 3 方库，或者“核心”React Native 是否可以实现？

Answer 1

您可以创建自己的组件，而无需使用第 3 方库。

renderRow = () => {
    return (
      <View style={styles.container}>
        <View style={styles.imageContainer}>
          <Image source={// The left icon source here}/>
        </View>
        <View style={styles.content}>
          <View>
            <Text style={styles.title}>Title</Text>
            <Text style={styles.subtitle}>SubTitle</Text>
          </View>
          <Image source={// The right arrow source here} />
        </View>
      </View>
    );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: 'white',
    padding: 10,
    height: 70,
  },
  imageContainer: {
    height: '100%',
    width: 70,
    backgroundColor: 'green',
    alignItems: 'center',
    justifyContent: 'center',
  },
  content: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    flex: 1,
    borderBottomColor: 'gray',
    borderBottomWidth: 1,
  },
  title: {
    color: 'black',
    fontWeight: 'normal',
  },
  subtitle: {
    color: 'lightgray',
    fontWeight: 'bold',
  },
})

或者您可以在NativeBase(ListItem组件)https://docs.nativebase.io/Components.html#list-def-headref中找到UITableViewCell的示例