Исправление размера элемента и добавление к нему ScrollView

Я хочу добавить дополнительную информацию внизу страницы и исправить эту часть нижней карточки на этой странице. Но при прокрутке я хочу просмотреть другую информацию, которую я хочу добавить внизу, которая будет отображаться только после прокрутки. Как Я делаю это?

У меня есть этот код на данный момент:

 render(){
    return(
      <View style = {styles.container}>
        <MapView style = {styles.mapcontainer}
          initialRegion = {{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }} />
        <JobInfo/>
      </View>
    )
  }
}

const styles = StyleSheet.create ({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    justifyContent: 'flex-end',
    alignItems: 'center'
  },
  mapcontainer: {
    flex: 1,
    width: width,
    height: height
  }
})

class JobInfo extends Component {
  render() {
    return (
      <View style = {{width: '100%'}}>
        <Card>
          <CardItem >
            <Text>General Info:</Text>
          </CardItem>
          <CardItem >
            <Body>
              <Text>
                Click on any carditem
              </Text>
            </Body>
          </CardItem>
          <CardItem >
            <Text>Packaging Info:</Text>
          </CardItem>
            <CardItem >
                <Body>
                  <Text>
                    Click on any carditem
                  </Text>
                </Body>
          </CardItem>
          <CardItem >
              <Text>Manpower Info:</Text>
            </CardItem>
              <CardItem >
                  <Body>
                    <Text>
                      Click on any carditem
                    </Text>
                  </Body>
          </CardItem>
        </Card>
      </View>
    )
  }
}

ScrollView почему-то не работает. Будем признательны за любую помощь. Спасибо.

Вы можете использовать FlatList или SectionList и передать компонент CardItem в функцию renderItem.

— 07.02.2019 06:56

Когда я использую FlatList, он просто показывает карту. Больше ничего. @AadityaThakkar

— 07.02.2019 07:12

вы хотите прокручивать только элементы JobInfo.? или Map и Jobinfo вместе

— 07.02.2019 07:16

только элементы JobInfo @VinayakB

— 07.02.2019 08:05

android ios react-native scrollview

07.02.2019 06:44

Коллекции (ArrayList , HashSet , HashMap)

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

попробуйте метод ниже

добавить JobInfo в Scrollview. и удалите опору высоты из mapContainer

 <ScrollView style = {[{flex:1} ,{ width: '100%'},  {justifyContent: 'flex-start'}]}>
    <JobInfo/>
    </ScrollView>

А mapContainer есть

    mapcontainer: {
    flex: 3,
    width: '100%',
  }

Используйте значения flex для настройки высоты карты.

Edit 1

Если вы хотите прокрутить весь контейнер (как Map, так и JobInfo), вам нужно установить определенную высоту для Map. Оберните все элементы в один ScrollView, как показано ниже.

<ScrollView style = {[{flex:1} ,  {justifyContent: 'flex-start'}]}>
     <View style = {styles.container}>
        <MapView style = {styles.mapcontainer}
          initialRegion = {{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }} />
        <JobInfo/>
      </View>
  </ScrollView>

И стили следующие

    const styles = StyleSheet.create ({
  container: {
     flex: 1,
  },
  mapcontainer: {
    width: '100%',
    height:600,
  }
})

Да, это работает. Спасибо. Но теперь я понял, что мне тоже нужно прокручивать карту. Можете ли вы сказать мне, как я могу это сделать? @Винаяк Б

— 07.02.2019 10:46

просьба уточнить. есть ли какой-либо контент после <JobInfo/> . если нет, то есть ли карта фиксированного размера (без гибкости)?

— 07.02.2019 11:27

Нет, после <JobInfo/> нет содержимого, а карта не имеет фиксированного размера. @Винаяк Б

— 07.02.2019 11:38

В этом случае на карте нечего прокручивать. Если я ошибаюсь, поправьте меня. Вы хотите увеличить высоту карты. так что верхнюю и нижнюю часть экрана можно прокручивать?

— 07.02.2019 11:42

Точно, когда я прокручиваю часть JobInfo, я также хочу прокручивать карту. Потому что теперь прокрутка части JobInfo происходит под картой при прокрутке. Я хочу прокручивать обе. Имеет ли это смысл? @Винаяк Б

— 07.02.2019 11:49

Думаю, высота в mapContainer не работает. Вот почему часть <JobInfo/> сейчас не на экране. Я вижу это, прокручивая на эмуляторе, но когда на устройстве прокрутка не выводит JobInfo, потому что она продолжает прокручивать саму карту, а часть JobInfo находится за пределами экрана, к которому я не могу получить доступ. Надеюсь, я правильно описал проблему. @Винаяк Б

— 07.02.2019 12:45

в этом случае вам нужно рассчитать точную высоту для вашего контейнера карты. const {высота, ширина} = Dimensions.get('окно'); height=height/3 mapcontainer: { width: '100%', height:height, } это будет полезно для вас

— 07.02.2019 13:27

07.02.2019 09:56