Question

我在将白色浮动按钮定位在蓝色标题顶部时遇到问题。该按钮是View中的TouchableOpacity，它具有Header和ScrollView。如何将按钮放在蓝色标题和滚动视图的顶部？

<View style={{ flex: 1 }}>
        <Header headerText={'Events'} />
        <TouchableOpacity 
                style={styles.addButtonContainerStyle}
                onPress={ () => {Actions.addEventMain()} }
            >
            <Text style={styles.addButtonTextStyle}>+</Text>
        </TouchableOpacity>
        <EventList />
    </View>

Answer 1

下面的代码会有所帮助。当代码增长时，视图的绝对位置有时变得难以维护。您需要根据需要自定义以下代码。

<View style={{ backgroundColor: "blue", flexDirection: "row-reverse" }}>
        <TouchableOpacity style={{ alignSelf: "flex-end" }}>
          <Text style={{ justifyContent: "center", fontSize: 20, textAlign: 'center' }}>
            +
        </Text>
        </TouchableOpacity >
        <View style={{ flex: 1 }}>
          <Text style={{ alignSelf: "center", fontSize: 20, textAlign: 'center' }}>
            Event
        </Text>
        </View>
      </View >

绝对的位置反应原生

1 个答案: