React Native 如何在底部放置按钮

nxagd54h 于 2023-10-22 发布在 React

关注(0)|答案(3)|浏览(142)

我有一个react本地组件，我试图把可触摸的不透明度按钮放在Map的底部（但在Map上的zIndex）。但由于某种原因，我无法做到这一点。我提供了部分代码如下。我也不明白为什么按钮出现在Map的顶部？我还附上了如何应用程序的照片看起来像不同的codes.

return (
    <SafeAreaView style={{paddingHorizontal:4,paddingTop:12}}>
      <Text style={{fontSize:16,fontWeight:"bold",marginLeft:6}}>Please Type your address in the box below</Text>
      <Text>Your address is only used to filter neaerby listings of items.</Text>
      <TextInput 
      value={address}
      onChangeText={changeAddress}
      placeholder='Set Your address here'
      style={styles.Pasinput}
      />
      {
        address && !showmap && <ShowFlatlistAddress navigation={navigation} stAddrs={setAddress} addresses={addressToDisplay} flag={flagUrl} phoneC={phoneCode} stshowmap={setshowmap}/>
      }
      {
        showmap && 
        <View style={{flex:1}}>
            <MapView
          provider={PROVIDER_GOOGLE}
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          zoomEnabled={true}
          zoomControlEnabled={true}
          style={{flex:1,height:height*1,width:width*1,...StyleSheet.absoluteFillObject}}
          >
          <Marker
            draggable
            coordinate={{
              latitude: 37.78825,
              longitude: -122.4324,
            }}
            onDragEnd={
              (e) => alert(JSON.stringify(e.nativeEvent.coordinate))
            }
            title={'Test Marker'}
            description={'This is a description of the marker'}
          />
        </MapView>
        <TouchableOpacity
        style={{position:"absolute",backgroundColor:"orange",zIndex:3,padding:12}}
        onPress={()=>{
          navigation.navigate("Verfication",{addressSet:address,flagC:flagUrl,phoneCodes:phoneCode})
        }}
        >
          <Text style={{fontSize:24,textAlign:"center"}}>Confirm Address</Text>
        </TouchableOpacity>
        </View>
      }
    </SafeAreaView>
  )

react-native

来源：https://stackoverflow.com/questions/77254318/how-to-position-a-button-at-the-bottom

3条答案

按热度按时间

4dc9hkyq1#

请使用这个，并说如果它工作：

return (
  <SafeAreaView style={{ flex: 1 }}>
    <View style={{ flex: 1 }}>
      <View style={{ flex: 1 }}>
        {/* MapView codes */}
      </View>
      <TouchableOpacity
        style={{
          backgroundColor: "orange",
          padding: 12,
          justifyContent: "center",
          alignItems: "center",
        }}
        onPress={() => {
          navigation.navigate("Verification", {
            addressSet: address,
            flagC: flagUrl,
            phoneCodes: phoneCode,
          });
        }}
      >
        <Text style={{ fontSize: 24, textAlign: "center" }}>
          Confirm Address
        </Text>
      </TouchableOpacity>
    </View>
  </SafeAreaView>
);

将显示Map的代码替换为{/* MapView codes */}部分。我用flex将MapView和Confirm Address按钮 Package 在View中：1.

赞(0）回复(0）举报 2023-10-22

6yoyoihd2#

我在这里做了一些假设，但我想我知道问题在哪里。当看一下the position documentation时，absolute的描述明确地说，该元素的位置绝对与其最近位置的祖先相关。对于您的代码，当前应该是<TextInput>，因为<TouchableOpacity>是该组件的子组件。这意味着，您必须将<TouchableOpacity>按钮相对于<TextInput>定位，以便将其置于底部-这很难做到。
我的建议是将<TouchableOpacity>放在文档流的顶部-例如作为<body>的直接子元素，或者任何应用程序中最顶部的元素。这个最上面的元素很可能会填满整个页面，这使得我们可以在<TouchableOpacity>上设置bottom: 0;，这意味着：“将此元素放置在此元素的底部，这基本上是整个页面-因此将其放置在页面的底部”。
要做到这一点，还有一个要求。The position documentation说：最接近它的第一个positioned祖先。因此，<body>需要得到position: relative;。具有position: relative;的元素被视为定位元素，但本质上根本不会改变其正常流的位置，这很好。
我一直在做这样的事情，唯一的要求是<TouchableOpacity>能够移动到应用程序中的不同位置（这可能并不总是可能的，但通常是可能的）。
如果你不能这样做，另一个选择是让<TouchableOpacity>的所有当前祖先都un-positioned**，并且只让祖先与position: relative;定位在一起，这样才有意义将<TouchableOpacity>绝对相对于。这可能是<body>，但根据您的布局，可能完全是其他元素。
如果这不能解决你的问题，或者你需要进一步的解释，请给我写一个评论。

赞(0）回复(0）举报 2023-10-22

oug3syen3#

传递一个视图作为父容器，并给予它flex 1。把你的安全区视图包在里面。然后将按钮传递到安全区域视图之外
前-

<View style={{flex:1}}>
    <SafeAreaView>
    //all content
    </SafeAreaView>
   <TouchableOpacity  style={{position:"absolute",backgroundColor:"orange",zIndex:3,padding:12}}
            onPress={()=>{
              navigation.navigate("Verfication",{addressSet:address,flagC:flagUrl,phoneCodes:phoneCode})
            }}
            >
              <Text style={{fontSize:24,textAlign:"center"}}>Confirm Address</Text>
            </TouchableOpacity>
    </View>

赞(0）回复(0）举报 2023-10-22

我来回答

React Native 如何在底部放置按钮

3条答案

相关问题

热门标签

最新问答