Как получить собственный UITableView с UITableViewCellStyleSubtitle в React Native?

Question

Я хочу создать нечто подобное с React Native:

(источник изображения https://developer.apple.com/design/human-interface-guidelines/ios/views/tables/) Как это можно сделать в React Native ? Нужны ли для этого сторонние библиотеки или это возможно с «ядром» React Native?

Answer 1

Вы можете создать свой собственный компонент без использования сторонних библиотек.

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',
  },
})

Или вы можете найти пример UITableViewCell в NativeBase (компонент ListItem) https://docs.nativebase.io/Components.html#list -def-headref