Вот компонент RN (0.59), использующий sectionList
для отображения имени события в строке. renderItem
отображает 3 элемента подряд, начиная с изображения головы (левое изображение), затем имя события, заканчивая другим изображением головы (правое изображение).
render() {
return (
<View style={styles.container}>
<SectionList
sections={this.state.activeEvents}
renderItem={({item, section}) => {return (
<View style={styles.container}>
<Image style={styles.image} source={{uri: item.image}}/>
<TouchableOpacity onPress={() => {this._onPress(item.id)}} >
<Text style={styles.item} key={item.id}>{item.name}</Text>
</TouchableOpacity>
<View style={styles.containerRight}>
<Image style={styles.image} source={{uri: "https://bootdey.com/img/Content/avatar/avatar1.png"}}/>
</View>
</View>)}}
renderSectionHeader={({section}) => <Text style={styles.sectionHeader}>{section.title}</Text>}
keyExtractor={(item, index) => item + index}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
paddingTop: 22,
paddingVertical: 12,
flexDirection: 'row',
alignItems: 'flex-start',
flexDirection: 'row',
alignItems: 'flex-start'
},
containerRight: {
flex: 1,
paddingTop: 22,
paddingVertical: 12,
flexDirection: 'row',
alignItems: 'flex-end',
flexDirection: 'row',
alignItems: 'flex-end'
},
sectionHeader1: {
paddingTop: 2,
paddingLeft: 10,
paddingRight: 10,
paddingBottom: 2,
fontSize: 14,
fontWeight: 'bold',
backgroundColor: 'rgba(247,247,247,1.0)',
},
sectionHeader:{
backgroundColor : '#64B5F6',
fontSize : 20,
padding: 5,
color: '#fff',
fontWeight: 'bold'
},
item: {
padding: 10,
fontSize: 18,
height: 44,
},
image:{
width:45,
height:45,
borderRadius:20,
marginLeft:20
},
imageRight:{
width:45,
height:45,
borderRadius:20,
marginRight:20
},
})
Вот результат приведенного выше рендера:
Все элементы строки (левое изображение, название события, правое изображение) должны быть выровнены по вертикали. Левое изображение и название события правильно выровнены по левой стороне строки, но правое изображение должно быть выровнено по горизонтали по правой стороне строки. Как я могу изменить свой jsx и стиль для достижения этого пользовательского интерфейса?
alignItems: "flex-end"
не работает. Пробовали ли вы использовать другой контент вместо нужного изображения? - person mahan   schedule 17.06.2019