Блог

Я пытаюсь разобраться с flexbox, а также с тем, как дерево компонентов работает с react-native-maps MapView (и отличается ли это от других компонентов с компонентами «поверх них», для которых я сейчас использую Callout .

Например, вот мой MapView метод рендеринга. TouchableOpacity Область (и ее buttonCallout контейнер. в настоящее время предназначен только для моих экспериментов в понимании макета. Я использую F8StyleSheet оболочку из makeitopen.com

 
  render() {
    return (
      <View style={styles.container}>
        <MapView
          style={{ flex: 1 }}
          region={this.state.region}
          showsUserLocation={true}
        >
          {this.renderMarkers()}
        </MapView>
        <Callout style={styles.searchCallout}>
          <TextInput
            onChangeText={searchText => this.setState({ searchText })}
            onSubmitEditing={this.handleSearch.bind(this)}
            style={styles.calloutSearch}
            placeholder={"Search"}
            value={this.state.searchText}
          />
        </Callout>
        <Callout style={styles.buttonCallout}>
          <TouchableOpacity
            style={[styles.touchable]}
            onPress={() => console.log("press")}
          >
            <Text style={styles.touchableText}>Press Me 1</Text>
          </TouchableOpacity>
          <TouchableOpacity
            style={[styles.touchable]}
            onPress={() => console.log("press")}
          >
            <Text style={styles.touchableText}>Press Me 2</Text>
          </TouchableOpacity>
        </Callout>
      </View>
    );
  }
}

const styles = F8StyleSheet.create({
  container: {
    flex: 1
  },
  buttonCallout: {
    flex: 1,
    alignSelf: "flex-end",
    justifyContent: "space-between",
    backgroundColor: "transparent",
    borderWidth: 0.5,
    ios: { padding: 5 },
    borderRadius: 20
  },
  touchable: {
    backgroundColor: "lightblue",
    padding: 10,
    margin: 10
  },
  touchableText: {
    fontSize: 24
  },
  searchCallout: {
    flexDirection: "row",
    backgroundColor: "rgba(255, 255, 255, 0.9)",
    borderRadius: 10,
    width: "80%",
    marginLeft: "5%",
    marginTop: 40
  },
  calloutSearch: {
    borderColor: "transparent",
    marginLeft: 10,
    width: "90%",
    marginRight: 10,
    height: 40,
    borderWidth: 0.0
  }
});
  

Имеет смысл, как я использую поля, чтобы searchCallout расположить там, где я хочу, потому что она находится вверху.

В нынешнем виде код buttonCallout (с TouchableOpacity внутренней частью) отображается в правом верхнем углу (разумно — alignSelf: 'flex-end' помещает его в «конец» справа).

…

Обновление в середине публикации! Изменив styles.container ‘s flexDirection на row , с выноской кнопок на alignSelf: flex-end . У меня есть выноска кнопки внизу, а выноска поиска все еще находится сверху. Я предполагаю, что Callout все компоненты отображаются друг над другом.

Итак, теперь я могу использовать justifyContent on styles.container , чтобы иметь обе выноски либо в центре, либо слева или справа ( center, flex-start, flex-end ). Как мне обосновать разные элементы по отдельности? ( justifySelf это не вещь!)

Перенос обеих выносок в не оформленный View компонент приводит к отображению выноски кнопки в правом верхнем углу, но выноски поиска нигде не найдено.

Перенос их обеих в выноску приводит к тому, что кнопки отображаются немного правее верхнего левого угла, при этом выноска поиска снова не отображается.

Помогите мне разобраться во всем этом! Спасибо 🙂

если вы пытаетесь расположить кнопку buttonCallout внизу, укажите ей postion:'absolute' , чтобы она оставалась внизу

 buttonCallout: {
    flex: 1,
    flexDirection:'row',
    position:'absolute',
    bottom:10,
    alignSelf: "center",
    justifyContent: "space-between",
    backgroundColor: "transparent",
    borderWidth: 0.5,
    borderRadius: 20
  },