Как уменьшить расстояние между объектами в горизонтальном плоском списке
Если вы хотите играть в midi-файлы, вы можете увидеть, как они это сделали: http://mudcu.be/midi-js/ . На странице примера используется MIDI.js . Обратите внимание, что он даже использует soundfonts, все через скрипты. Довольно аккуратно.
Если вас больше интересует управление миди-устройствами или наличие MIDI-устройств управляет вашей страницей HTML5: ребята W3C работают над этим. См. Описание черновика api здесь
1 ответ
Именно ListItem, что вы завернули в Card, вызывает массивное заполнение, которое вы видите. Если вы удалите его, вы обнаружите, что карты гораздо ближе друг к другу.
Затем можно обернуть карту в компонент TouchableOpacity или аналогичный, что позволит вам провести сенсорное событие, а также даст вам больший контроль над пространством элементов, настроив стиль на TouchableOpacity.
Не забудьте импортировать его
import { TouchableOpacity } from 'react-native';
Вот как вы можете обновить renderItem
renderItem = ({ item }) => {
return (
<TouchableOpacity onPress={() =>
this.props.navigate(this.state.navigateTO,{
id:item['id'],
title:item['title'],
top_image:item['top_image'],
token:this.state.token,
lan:this.state.lan,
type:this.state.type,
}
)}
style={{ padding: 10 }} // adjust the styles to suit your needs
>
<Card style={{height:320, width: 200}}>
<CardItem cardBody>
<View
style={{height:200, width: 200, backgroundColor:'green'}}/>
</CardItem>
<CardItem>
<Left>
<Body>
<Text >{item['title']}</Text>
<Text note>{item['city']}</Text>
</Body>
</Left>
</CardItem>
</Card>
</TouchableOpacity>
);
}