Я хочу создать вертикальную шкалу времени (как показано ниже), чтобы реагировать на родной язык, но я не могу найти достойную библиотеку. Если кто-то предложит библиотеку или если она не слишком сложна, вы можете узнать, как это сделать без библиотека.Реагировать на встроенный компонент временной шкалы времени
ответ
Вы можете реализовать это в обычном ListView. В каждой строке поместите вид с фиксированной шириной слева, чтобы нарисовать точку и линию. Внутри этого вида добавьте точку, которая представляет собой вид с угловым радиусом, равным половине размера (с центром в обоих направлениях). Линия - это другой вид (абсолютная позиция). Смотрите код и снимок экрана ниже. Вы можете обернуть это в компонент TimeLineListView. Он будет иметь тот же интерфейс, что и ListView, но возврат контента из renderRow будет вставлен в вид content
(для замены text
).
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
ListView,
} from 'react-native';
export default class timeline extends Component {
constructor() {
super();
this.renderRow = this.renderRow.bind(this);
const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
this.state = {
dataSource: ds.cloneWithRows([
'row 1',
'row 2',
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ut venenatis felis. Donec at tempus neque. Morbi vitae sem et nisi porta ornare. Cras at venenatis tellus. Curabitur consequat lacinia lacus, et luctus tortor dignissim nec. Suspendisse scelerisque aliquet vehicula. Integer at ante elit.',
'Suspendisse potenti. Proin varius risus ac venenatis elementum. Morbi fringilla ante et nibh accumsan, ultricies tempor est porta. Nunc molestie neque a efficitur posuere. Nunc egestas, massa vitae hendrerit feugiat, ligula sem ullamcorper ante, quis ultricies quam turpis ac lectus. Praesent luctus, sapien imperdiet sagittis iaculis, nibh lacus convallis velit, sed placerat enim justo ornare tortor. Phasellus sed dui id odio lobortis imperdiet. Duis sollicitudin tellus sed eros commodo ultrices. Donec auctor nunc id quam suscipit, tempus tincidunt elit placerat. Sed nec odio vel ligula maximus varius. Nullam vulputate augue non gravida lacinia. Nam ac lobortis libero, id sollicitudin nulla.']),
};
}
renderRow(rowData, section, row) {
const total = this.state.dataSource.getRowCount();
const topLineStyle = row == 0 ? [styles.topLine, styles.hiddenLine] : styles.topLine;
const bottomLineStyle = row == total - 1 ? [styles.bottomLine, styles.hiddenLine] : styles.bottomLine;
return (
<View style={styles.row}>
<View style={styles.timeline}>
<View style={styles.line}>
<View style={topLineStyle} />
<View style={bottomLineStyle} />
</View>
<View style={styles.dot} />
</View>
<View style={styles.content}>
<Text>{rowData}</Text>
</View>
</View>
);
}
render() {
return (
<View style={styles.container}>
<ListView style={styles.listView}
dataSource={this.state.dataSource}
renderRow={this.renderRow}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
listView: {
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
},
row: {
padding: 4,
paddingLeft: 0,
},
content: {
marginLeft: 40,
},
timeline: {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
width: 40,
justifyContent: 'center', // center the dot
alignItems: 'center',
},
line: {
position: 'absolute',
top: 0,
left: 18,
width: 4,
bottom: 0,
},
topLine: {
flex: 1,
width: 4,
backgroundColor: 'black',
},
bottomLine: {
flex: 1,
width: 4,
backgroundColor: 'black',
},
hiddenLine: {
width: 0,
},
dot: {
width: 16,
height: 16,
borderRadius: 8,
backgroundColor: 'black',
},
});
AppRegistry.registerComponent('timeline',() => timeline);
Этот подход, вероятно, сработает, но я думаю, что это немного расплывчато, как ответ. – mduminy
@mduminy добавил пример кода и скриншот. –
@HaitaoLi Как удалить верхнюю и нижнюю строку. –
- 1. Встроенный виджет временной шкалы Twitter не работает
- 2. Расчет времени ожидания временной шкалы времени
- 3. Веселый формат временной шкалы
- 4. Виджет временной шкалы wxPython
- 5. Встроенный виджет временной шкалы, не работающий в SPA
- 6. просмотр временной шкалы времени на личную временную шкалу
- 7. Отклонения временной шкалы в миллисекундах
- 8. несколько графиков временной шкалы с использованием графиков временной шкалы Google
- 9. php сортировка временной шкалы
- 10. Неточности временной шкалы JavaFX
- 11. Собрание смещения временной шкалы
- 12. Закладки временной шкалы Facebook
- 13. Реализация временной шкалы пути
- 14. Портфолио Источник временной шкалы
- 15. SVG график временной шкалы
- 16. Элементы временной шкалы на структуре файловых архивов
- 17. Оказание координат карты на графике временной шкалы
- 18. Агрегация временной шкалы Google
- 19. Как просмотреть «Старый» формат временной шкалы
- 20. Подсчет событий на основе временной шкалы?
- 21. Ориентация временной шкалы H5P
- 22. Хронология временной шкалы ненадежна?
- 23. Форматирование временной шкалы jquery?
- 24. Отключить кнопку временной шкалы?
- 25. Создание прокручиваемой временной шкалы iOS
- 26. Запрос данных на график временной шкалы
- 27. Уточнение на экране временной шкалы Fiddler View
- 28. Функция временной шкалы реального времени, такая как tweetdeck?
- 29. Реагировать на встроенный стиль, плохая вещь?
- 30. Backbone.js: заполнение временной шкалы событий
Какой код у вас есть до сих пор, и как она выглядит? –
Почему вы, ребята, обсудили этот вопрос? – eden
@EnieJakiro Можете ли вы оставить upvote на вопрос, если вы сочтете это полезным. :) –