ScrollViewコンポーネントとは何ですか？ReactNativeでそれを使用する方法は？
ScrollViewは、複数のコンポーネントとビューに対応できるスクロールコンテナです。これはreactiveのコアコンポーネントの1つであり、これを使用すると、垂直方向と水平方向の両方にスクロールできます。
ScrollViewは、実行しているプラットフォームに基づいて、同等のネイティブにマップされます。したがって、Androidではビューは
この例では、ScrollViewにはテキストコンポーネントとともにビューがあり、ビュー内にラップされています。
ScrollViewを使用するには、最初にコンポーネントをインポートします-
ScrollView内に表示されるデータは、以下に示すように、状態オブジェクトの名前内に格納されます-
データ、つまり this.state.names は配列です。 map（）メソッドが配列で使用され、名前は以下に示すように[表示]->[テキストコンポーネント]内に表示されます-
ScrollViewは、サイズが小さい静的データに最適です。ただし、動的データを回避する場合は、FlatListコンポーネントを使用するのに最適な巨大なリストになる可能性があります。
ScrollViewの完全なコードは次のとおりです。
デフォルトでは、ScrollViewはデータを垂直方向に表示します。データを水平方向に表示するには、小道具を使用します
以下に示すようにhorizontal={true}-
SteamワークショップはゲームクライアントSteamの一部です。これは、ユーザーとコンテンツ作成者がお気に入りのゲームのコンテンツをアップロードおよびダウンロードできるコミュニティ主導の場所です。 Steamワークショップは、MOD、アートワーク、スキン、マップなど、さまざまなアイテムをサポートしています。 Steamワークショップの閲覧方法 このSteamコミュニティワークショップページにアクセスすると、WebブラウザでSteamワークショップにアクセスできます。または、[コミュニティ]タブの[ワークショップ]をクリックして、Steamクライアント自体からアクセスすることもできます。
この投稿では、backgroundVideo を作成します。 React Nativeで。 React Native を使い始めたばかりの方は、私の記事 What you need to know to build mobile apps with React Native をチェックしてください。 デモ:Peleton ホーム画面 バックグラウンド ビデオは、アプリの UI に素晴らしい効果を追加できます。ここで行うように、たとえば広告を表示したり、ユーザーにメッセージを送信したりする場合にも役立ちます。 いくつかの基本的な要件が必要になります。開始するには、react-native 環 例1：ScrollViewを使用して垂直方向にスクロールする
import { Text, View, StyleSheet, ScrollView} from 'react-native'; state = {
names: [
{'name': 'Ben', 'id': 1},
{'name': 'Susan', 'id': 2},
{'name': 'Robert', 'id': 3},
{'name': 'Mary', 'id': 4},
{'name': 'Daniel', 'id': 5},
{'name': 'Laura', 'id': 6},
{'name': 'John', 'id': 7},
{'name': 'Debra', 'id': 8},
{'name': 'Aron', 'id': 9},
{'name': 'Ann', 'id': 10},
{'name': 'Steve', 'id': 11},
{'name': 'Olivia', 'id': 12}
]
} <ScrollView>
{this.state.names.map((item, index) => (<View key = {item.id} style = {styles.item}><Text>{item.name}</Text></View>))
}
</ScrollView> import React, { Component } from "react";
import { Text, View, StyleSheet, ScrollView} from 'react-native';
class ScrollViewExample extends Component {
state = {
names: [
{'name': 'Ben', 'id': 1},
{'name': 'Susan', 'id': 2},
{'name': 'Robert', 'id': 3},
{'name': 'Mary', 'id': 4},
{'name': 'Daniel', 'id': 5},
{'name': 'Laura', 'id': 6},
{'name': 'John', 'id': 7},
{'name': 'Debra', 'id': 8},
{'name': 'Aron', 'id': 9},
{'name': 'Ann', 'id': 10},
{'name': 'Steve', 'id': 11},
{'name': 'Olivia', 'id': 12}
]
}
render(props) {
return (
<View style={{flex :1, justifyContent: 'center', margin: 15 }}>
<ScrollView>
{this.state.names.map((item, index) => (<View key = {item.id} style = {styles.item}><Text>{item.name}</Text></View>))
}
</ScrollView>
</View>
);
}
}
export default ScrollViewExample;
const styles = StyleSheet.create ({
item: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 30,
margin: 2,
borderColor: '#2a4944',
borderWidth: 1,
backgroundColor: '#d2f7f1'
}
}) 出力
例2：ScrollViewを使用して水平方向にスクロールする
<ScrollView horizontal={true}>
{this.state.names.map((item, index) => (<View key = {item.id} style = {styles.item}><Text>{item.name}</Text></View>))
}
</ScrollView>
import React, { Component } from "react";
import { Text, View, StyleSheet, ScrollView} from 'react-native';
class ScrollViewExample extends Component {
state = {
names: [
{'name': 'Ben', 'id': 1},
{'name': 'Susan', 'id': 2},
{'name': 'Robert', 'id': 3},
{'name': 'Mary', 'id': 4},
{'name': 'Daniel', 'id': 5},
{'name': 'Laura', 'id': 6},
{'name': 'John', 'id': 7},
{'name': 'Debra', 'id': 8},
{'name': 'Aron', 'id': 9},
{'name': 'Ann', 'id': 10},
{'name': 'Steve', 'id': 11},
{'name': 'Olivia', 'id': 12}
]
}
render(props) {
return (
<View style={{flex :1, justifyContent: 'center', marginTop: 100 }}>
<ScrollView horizontal={true}>
{this.state.names.map((item, index) => (<View key = {item.id} style = {styles.item}><Text>{item.name}</Text></View>))
}
</ScrollView>
</View>
);
}
}
export default ScrollViewExample;
const styles = StyleSheet.create ({
item: {
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'center',
padding: 30,
margin: 2,
borderColor: '#2a4944',
borderWidth: 1,
height:100,
backgroundColor: '#d2f7f1'
}
}) 出力
