Экспо реагирует на родную, как сделать отзывчивый кликабельный список с колонками - PullRequest
0 голосов
/ 23 апреля 2020

Я недавно учился реагировать на родной язык, и я использую выставку. Я хочу сделать адаптивную сетку кликабельных элементов. Подобно тому, как на главном экране iPhone есть куча приложений в сетке. Мои попытки до сих пор дали мне это:

enter image description here

Для того, что вы видите на изображении, я использую плоский список с фиксированным числом столбцов ( отсюда одна из колонн обрезается). Элементы в списке не реагируют на нажатия.

Как мне go сделать это в адаптивной сетке, которая приспосабливается к разным размерам экрана телефона, иметь ее прокручиваемую (какой она является в настоящее время) и иметь каждую пункт в списке реагирует на нажатие?

Я ценю все, что указывает мне правильное направление

1 Ответ

1 голос
/ 23 апреля 2020

вы можете сделать это двумя способами. 1. при использовании муравейника используйте «GRID COMPONENT» <Grid data={data} columnNum={3} isCarousel onPress={(_el, index) => alert(index)} />

**Sample** : [Vist][1]
for more [visit here][1] .

Используя "FlatList" <FlatList data={[{},{}]} //array of objects renderItem={({item}) => ( <TouchableOpacity style={style.GridViewBlockStyle} onPress={this._handleClick.bind(this, item.link, item.text)} > <View style={{ height: 100, justifyContent: 'center', alignItems: 'center', }} > {item.icon} <Text style={style.GridViewInsideTextItemStyle}> {item.text} </Text> )} </View> </TouchableOpacity> )} numColumns={3} keyExtractor={item => item.id.toString()} style={{}} />

Образец Визит .

...