React-Nativeの左右連携一覧の詳細説明
この記事ではReact-Nativeの左右連携リストのサンプルコードを中心に紹介していますが、編集者が非常に良いと思ったので参考として共有させていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
1: 左右のリンクリストは職場で非常によく使われます。
今日は、同僚が書いたサンプルを共有します。簡単な修正を加えただけです。
注: この例ではソース コードを変更する必要があります。この記事の第 3 条を参照してください。
2: コーディング
ParcelPage.js:
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
FlatList,
SectionList,
Dimensions,
TouchableOpacity,
Image,
} from 'react-native';
import ParcelData from './ParcelData.json'
var { width, height } = Dimensions.get('window');
let Headers = [];
export default class ParcelPage extends Component {
static navigationOptions = ({ navigation }) => ({
headerTitle : '联动List',
});
componentDidMount() {
ParcelData.map((item, i) => {
Headers.push(item.section);
});
};
componentWillUnmount() {
Headers = [];
};
renderLRow = (item) => {
return (
<TouchableOpacity style={[ styles.lItem, {backgroundColor: item.index == this.state.cell ? 'white' : null} ]}
onPress={()=>this.cellAction(item)}>
<Text style={styles.lText}>{ item.item.section }</Text>
</TouchableOpacity>
)
};
cellAction = (item) => {
if (item.index <= ParcelData.length) {
this.setState({
cell : item.index
});
if (item.index > 0) {
var count = 0;
for (var i = 0;
i < item.index;
i++) {
count += ParcelData[ i ].data.length + 1
}
this.refs.sectionList.scrollToIndex({ animated : false, index : count })
} else {
this.refs.sectionList.scrollToIndex({ animated : false, index : 0 });
}
}
};
itemChange = (info) => {
let section = info.viewableItems[ 0 ].section.section;
if (section) {
let index = Headers.indexOf(section);
if (index < 0) {
index = 0;
}
this.setState({ cell : index });
}
};
state = {
cell : 0
};
renderRRow = (item) => {
return (
<View style={ styles.rItem }>
<Image style={ styles.icon } source={{ uri : item.item.img }}/>
<View style={ styles.rItemDetail }>
<Text style={ styles.foodName }>{ item.item.name }</Text>
<View style={ styles.saleFavorite }>
<Text style={ styles.saleFavoriteText }>{ item.item.sale }</Text>
<Text style={ [styles.saleFavoriteText,{ marginLeft:15 }]}>{ item.item.favorite }</Text>
</View>
<Text style={ styles.moneyText }>￥{ item.item.money }</Text>
</View>
</View>
)
};
sectionComp = (section) => {
return (
<View style={{height:30,backgroundColor:'#DEDEDE',justifyContent:'center',alignItems:'center'}}>
<Text >{section.section.section}</Text>
</View>
)
};
separator = () => {
return (
<View style={{height:1,backgroundColor:'gray'}}/>
)
};
render() {
return (
<View style={ styles.container }>
<FlatList
ref='FlatList'
style={ styles.leftList }
data={ ParcelData }
renderItem={(item) => this.renderLRow(item)}
ItemSeparatorComponent={ () => this.separator() }
keyExtractor={ (item) => item.section }
/>
<SectionList
ref='sectionList'
style={ styles.rightList }
renderSectionHeader={ (section) => this.sectionComp(section) }
renderItem={ (item) => this.renderRRow(item) }
sections={ ParcelData }
keyExtractor={ (item) => item.name }
onViewableItemsChanged={ (info) => this.itemChange(info) }
/>
</View>
);
}
}
const styles = StyleSheet.create({
container : {
flexDirection : 'row'
},
leftList : {
width : 1 * width / 4,
backgroundColor : '#E9E9EF'
},
lItem : {
minHeight : 44,
justifyContent : 'center',
},
lText : {
marginLeft : 10,
marginRight : 10,
fontSize : 16,
},
rightList : {
width : 3 * width / 4
},
rItem : {
flexDirection : 'row'
},
rItemDetail : {
flex : 1,
marginTop : 10,
marginLeft : 5
},
icon : {
height : 60,
width : 60,
marginTop : 10,
marginBottom : 10,
marginLeft : 8,
borderWidth : 1,
borderColor : '#999999'
},
foodName : {
fontSize : 18,
},
saleFavorite : {
flexDirection : 'row',
marginTop : 5,
marginBottom : 5,
},
saleFavoriteText : {
fontSize : 13,
},
moneyText : {
color : 'orange'
},
});ParcelData.js
[
{
"section" : "热销",
"data" : [
{
"name" : "蟹黄汤包",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "20",
"img":"http://p1.meituan.net/deal/__39230311__3449301.jpg"
},
{
"name" : "小馄饨",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
},
{
"name" : "蟹黄汤包+牛杂粉丝汤套餐",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "35",
"img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
},
{
"name" : "鸭血粉丝汤",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "15",
"img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
}
]
},
{
"section" : "介绍我们",
"data" : [
{
"name" : "慎用差评！任何问题联系我们就可解决哦",
"sale" : "月售1",
"favorite" : "赞0",
"money" : "0",
"img":"http://p1.meituan.net/deal/__39230311__3449301.jpg"
}
]
},
{
"section" : "折扣套餐",
"data" : [
{
"name" : "特色蟹黄汤包+鸭血粉丝汤+果汁套餐",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "50",
"img":"http://p1.meituan.net/deal/__39230311__3449301.jpg"
},
{
"name" : "蟹黄汤包+牛杂粉丝汤套餐",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "35",
"img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
},
{
"name" : "蟹黄汤包+南瓜粥+果汁套餐",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
},
{
"name" : "金牌蟹黄汤包+紫米粥+柠檬果汁套餐",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
},
{
"name" : "台式卤肉饭+南瓜粥套餐",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
}
]
},
{
"section" : "纯手工汤宝",
"data" : [
{
"name" : "金牌蟹黄汤包",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p1.meituan.net/deal/__39230311__3449301.jpg"
},
{
"name" : "蟹庭丰特色蟹黄汤包",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
},
{
"name" : "蟹黄汤包",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
},
{
"name" : "干贝汤包",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
},
{
"name" : "鲍鱼汤包",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
},
{
"name" : "全家福汤包",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
},
{
"name" : "虾仁汤包",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
}
]
},
{
"section" : "汤、粥类",
"data" : [
{
"name" : "紫米粥",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p1.meituan.net/deal/__39230311__3449301.jpg"
},
{
"name" : "金丝南瓜粥",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
},
{
"name" : "小米粥",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
},
{
"name" : "白粥",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
}
]
},
{
"section" : "面食类",
"data" : [
{
"name" : "鸡汤面",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p1.meituan.net/deal/__39230311__3449301.jpg"
},
{
"name" : "红烧小排面",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
},
{
"name" : "红烧牛肉面",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
}
]
},
{
"section" : "调味小菜",
"data" : [
{
"name" : "肉松",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p1.meituan.net/deal/__39230311__3449301.jpg"
},
{
"name" : "辣椒包",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
},
{
"name" : "泡菜",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
},
{
"name" : "酱黄瓜",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
},
{
"name" : "萝卜干",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
}
]
},
{
"section" : "饮料",
"data" : [
{
"name" : "可乐",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p1.meituan.net/deal/__39230311__3449301.jpg"
},
{
"name" : "雪碧",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p1.meituan.net/deal/849d8b59a2d9cc5864d65784dfd6fdc6105232.jpg"
},
{
"name" : "王老吉",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
},
{
"name" : "橙汁",
"sale" : "月售875",
"favorite" : "赞31",
"money" : "10",
"img":"http://p0.meituan.net/deal/ed3025663342b126eaae24764704b017136487.jpg"
}
]
}
] 3: ソースコードを変更する
1- :セクションリスト
node_modules/react-native/Libraries/Lists/SectionList.js,代码格式化后大概在187行的位置，修改如下
class SectionList<SectionT: SectionBase<any>>
extends React.PureComponent<DefaultProps, Props<SectionT>, void> {
props: Props<SectionT>;
static defaultProps: DefaultProps = defaultProps;
render() {
const List = this.props.legacyImplementation ? MetroListView : VirtualizedSectionList;
return <List
ref={this._captureRef}
{...this.props} />;
}
_captureRef = (ref) => {
this._listRef = ref;
};
scrollToIndex = (params: { animated?: ?boolean, index: number, viewPosition?: number }) => {
this._listRef.scrollToIndex(params);
}
}2 -:VirtualizedSectionList
パスは、node_modules/react-native/Libraries/Lists/VirtualizedSectionList.js の 253 行目あたりにあり、次のように変更されます:
render() {
return <VirtualizedList
ref={this._captureRef}
{...this.state.childProps} />;
}
_captureRef = (ref) => {
this._listRef = ref;
};
scrollToIndex = (params: { animated?: ?boolean, index: number, viewPosition?: number }) => {
this._listRef.scrollToIndex(params);
}Four:
1- : コードの github アドレス: https://github.com/erhutime/React-Navigation-All
2-: ダウンロードが完了したら、index.ios.js を変更します: エントリ ファイルは次のとおりです:
import App from './jscode/doubleList/App' AppRegistry.registerComponent('All', () => App);
5: レンダリングは次のとおりです:
関連する推奨事項:
以上がReact-Nativeの左右連携一覧の詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7552
15
1382
52
83
11
22
91
Zhengtu IPxクラシックアニメーション「西遊記」西への旅は恐れ知らずで恐れ知らずです
Jun 10, 2024 pm 06:15 PM
広大な大地を旅し、西への旅に踏み出しましょう！本日、Zhengtu IPはCCTVアニメーション「西遊記」と国境を越えた協力を開始し、伝統と革新を組み合わせた文化の饗宴を共同で創造することを正式に発表しました。この協力は、国内の2大クラシックブランド間の緊密な協力を示すだけでなく、中国の伝統文化を促進するジャーニーシリーズのたゆまぬ努力と粘り強さを証明するものでもあります。 『Zhengtu』シリーズは誕生以来、その奥深い文化遺産と多様なゲームプレイでプレイヤーに愛されてきました。文化の継承という点では、Zhengtu シリーズは常に中国の伝統文化への敬意と愛を維持し、伝統文化の要素をゲームに巧みに統合し、プレイヤーにより多くの楽しさとインスピレーションをもたらしてきました。 CCTV アニメーション「西遊記」は、世代の成長とともに続いてきた古典です。
React Nativeのバージョンを変更する方法
Jan 19, 2023 pm 02:31 PM
React Native のバージョンを変更する方法: 1. React Native プロジェクト ディレクトリに入り、コマンド ラインに「react-native --version」と入力します。 2. npm パッケージで管理されている React Native バージョンを表示します。 3. 「パッケージ」を開きます。プロジェクト内の .json" ファイルを編集し、依存関係フィールドを変更し、「react-native」バージョンをターゲット バージョンに変更します。
PHPでRedisリスト操作を実装する方法
May 26, 2023 am 11:51 AM
リスト操作 //リストの先頭から値を挿入します。 $ret=$redis->lPush('city','guangzhou');//リストの末尾から値を挿入します。 $ret=$redis->rPush('city','guangzhou');//リストの指定範囲内の要素を取得します。 0 はリストの最初の要素を表し、-1 は最後の要素を表し、-2 は最後から 2 番目の要素を表します。 $ret=$redis->l
フライドチキンは素晴らしいビジネスであり、間違いは許されません。 「Backwater Cold」は KFC と連動しており、プレイヤーは「チキンの声を聞くと踊り出す」ようになる
Apr 17, 2024 pm 06:34 PM
この日、「バックウォーターコールド」は4月19日から5月12日までKFCとの連携を開始すると正式に発表したが、その具体的な内容には「天に恥ずべきことだ」と多くの人が唖然とした。 「社会にとって大切なものだよ」その理由は、このテーマイベントのキャッチコピーにあります。『原神』と『ベン・タイ』の KFC 連動を見た友人たちは、「異世界との出会いと美味しい食事」が「Ni Shui」で現実になったという印象を抱いたに違いありません。ハン「さて: 店員に大声で言います。「神様がこの事件を調査中です。あなたは誰ですか?」 店員は「フライド チキンは大企業です。間違いは許されないのです!」と答える必要があります。 従業員向けのトレーニング ガイド:決して笑わないでください！それだけではなく、今回のコラボではダンス大会も開催され、テーマストアに行って「『ジー』が聞こえたら踊ろう」というダンスを披露すると、揺れる小さな譜面台もプレゼントされる。恥ずかしい、とても恥ずかしい！でもそれが私が望むことなの
ダブルシェフエクスタシー！ 『陰陽師』×『初音ミク』コラボが3月6日よりスタート
Feb 22, 2024 pm 06:52 PM
NetEaseのモバイルゲーム『陰陽師』は本日、陰陽師×初音ミクの限定コラボを3月6日より正式に開始すると発表した。コラボ限定SSR初音ミク(CV:藤田咲)とSSR鏡音リン(CV:下田麻美)が平安京に降臨！ 3月9日よりゲーム内にて連動オンライン特別公演イベントが正式スタートします～
名作の再会、時空の逆転、『ドラゴン2』×『ウエストワード・ジャーニー』映画連動決定
Mar 28, 2024 pm 04:40 PM
時間と空間を逆転させる古典的な再会。モバイル ゲーム「ドラゴン 2」と名作映画「ウエストワード ジャーニー」が 4 月 11 日にリリースされる予定です! モバイル ゲーム「ドラゴン 2」の 1 周年記念式典に合わせて、クラシックな思い出をもう一度体験してください。重慶の伝説的な物語、志尊宝と子夏の戦いを再び目撃してください。色とりどりの瑞雲があり、黄金の鎧と聖衣があるに違いない「般若波羅蜜多」という言葉が耳に響くとき、子夏が至宝の心に残した涙を思い出しますか?何千年も経っても、運命から逃れることは不可能です。たとえ見返りがなくても、私の愛は死ぬまで変わりません。 Westward Journeyのコラボ登場「一万年の隻眼」と「神の意志」はアニバーサリーバージョンと同時に登場します。黄金の鎧を身に着けたり、自分だけの無類の英雄に出会ったりして、最も情熱的な青春に戻ってほしいと願っています。五百年の守り、死ぬまで真実の愛 あの日、洛陽と偶然出会った時に言った
JavaでJSONArrayをリストに変換する方法
May 04, 2023 pm 05:25 PM
1: JSONArray を List にJSONArray 文字列を List に//JSONArray を初期化するJSONArrayarray=newJSONArray();array.add(0,"a");array.add(1,"b");array.add(2,"c") ; Listlist=JSONObject.parseArray(array.toJSONString(),String.class);System.out.println(list.to
Java開発フォームフィールドの連携機能と依存関係機能
Aug 07, 2023 am 08:41 AM
Java 開発フォーム フィールドのリンク機能と依存関係機能の紹介: Web 開発では、フォームは頻繁に使用される対話方法です。ユーザーはフォームを通じて情報を入力して送信できますが、煩雑で冗長なフォーム フィールドの選択操作がユーザーに問題を引き起こすことがよくあります。 . ご迷惑をおかけします。したがって、フォーム フィールドのリンク機能と依存関係機能は、ユーザー エクスペリエンスと操作効率を向上させるために広く使用されています。この記事では、Java 開発を使用してフォーム フィールドのリンク機能と依存関係機能を実装する方法を紹介し、対応するコード例を示します。 1. フォームフィールド連携機能の実装形態
