如何阻止视图占用屏幕宽度并在 React Native 中重叠其他组件？

Question

我正在尝试构建一个react native Note posting应用程序，用户将在该应用程序中按下按钮，并在屏幕上添加一个新的Note。每个笔记都有一个标题和一个细节。目前，它们正在增加。因此，当用户第一次按下按钮时，带有"标题1"one_answers"细节1"的组件将被发布为一个简单的彩色正方形。现在的问题是，我希望能够在整个屏幕上有一个可滚动的视图，同时在屏幕右下角锁定一个按钮，即使在滚动应用程序时也不会移动。

一个例子是Gmail应用程序发送电子邮件的按钮。Gmail

这是我的应用程序，红色的可触摸不透明度"添加注释！"添加了组件。

添加钞票前：

添加之前

添加钞票后：

添加后

如何将"Add Note！"按钮放置在屏幕的右下角并将其锁定，使其即使在FlatList中的组件超过屏幕时也不会移动。

我的代码：`

const IndexScreen = () => {
const {state, addNote } = useContext(Context);
return <View style={styles.Container}>
<ScrollView>
<FlatList
data={state}
keyExtractor={Note => Note.title}
renderItem={({item}) => {
return (item.note)
}}
/>
<TouchableOpacity style={styles.Note} onPress={addNote}>
<Text>Add Note!</Text>
</TouchableOpacity>
</ScrollView>
</View>
};
const styles = StyleSheet.create({
Container: {
flexDirection: 'row',
justifyContent: 'space-between',
borderWidth : 2,
borderColor: 'black',
},
Note: {
height: 100,
width: 100,
borderWidth : 2,
borderColor: 'yellow',
alignSelf: 'flex-end',
backgroundColor: 'red',
flex: 1
}
});

`

Answer 1

尝试react本机操作按钮。它看起来很棒，同时你的问题也会得到解决。这是链接。

Answer 2

不是100%确定，但您可以尝试设置position: absolute，然后也设置right和bottom属性，这样它就固定了。

Answer 3

如何将"Add Note！"按钮放置在屏蔽并锁定它，这样即使组件在平面列表超过屏幕

您可以使用absolute定位。像这样：

Note: {
height: 100,
width: 100,
borderWidth : 2,
borderColor: 'yellow',
backgroundColor: 'red',
position: "absolute",
bottom: 0,
right: 0
}

我添加了position、left和right属性。

Answer 4

react-native-floating-action应该能做到这一点。https://www.npmjs.com/package/react-native-floating-action