ネイティブで反応しますが、まともなライブラリーを見つけることができない垂直のタイムラインを作成したいと思います。誰かがライブラリを提案することができますか、あまりにもトリッキーでないと、図書館。ネイティブの垂直タイムラインコンポーネントに反応する
答えて
これは、通常のListViewで実装できます。各行で、固定幅のビューを左に配置して、点と線を描画します。このビューの内側には、コーナーの半径がサイズの半分に等しい(両方向の中心にある)ビューである点を追加します。線は別のビューです(絶対配置)。以下のコードとスクリーンショットを参照してください。これをTimeLineListViewコンポーネントにラップすることができます。 ListViewと同じインタフェースを持ちますが、renderRowからのコンテンツの戻り値はビュー(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. ネイティブに反応するかネイティブで反応を開始する
- 2. 反応し、ネイティブ:コンポーネントのみ反応するネイティブ・ナビゲーションや反応ナビゲーションを
- 3. ネイティブに反応するネイティブ0.49
- 4. ネイティブ・デバッグに反応する
- 5. 垂直反転シークバー
- 6. 反応するネイティブ・ナビゲーションを反応させ、ネイティブ歩哨iosで
- 7. 反応するネイティブのみ
- 8. エラー "反応するネイティブの
- 9. 反応ネイティブ(0.49)
- 10. が反応ネイティブ
- 11. スプラッシュスクリーン反応ネイティブ
- 12. 反応し、ネイティブ
- 13. 反応し、ネイティブ
- 14. 反応:ネイティブ:フレックスボックスアラインメント
- 15. 反応ネイティブで反応ネイティブを実装する際にエラーが発生する
- 16. ネイティブのネイティブの反応ネイティブで
- 17. フィルターアレイの反応ネイティブ
- 18. 反応ネイティブのモーダルボトムメニュー
- 19. 反応ネイティブのマルチスレッド
- 20. は、ネイティブの反応 -
- 21. 反応ネイティブのアニメーションサブメニュー
- 22. は、ネイティブのListViewに反応
- 23. は反応するネイティブ
- 24. 反応するネイティブf8コンポーネント
- 25. は、ネイティブ反応する
- 26. レルム - 反応するネイティブ
- 27. 反応するネイティブ・ナビゲーション
- 28. レルムデータベース - 反応するネイティブ
- 29. 反応するネイティブ:テキストコンポーネント
- 30. シーン、タブ(反応するネイティブ・ルータ・フラックス)とアイコン(反応するネイティブ・ベクトルのアイコンを)
? –
あなたはなぜこの質問をdownvoteでしたか? – eden
@EnieJakiroもしあなたが役に立つと思ったら、質問にupvoteを残すことができますか? :) –