javascript - 在 React Native 中，如何阻止 View 占用屏幕宽度并与其他组件重叠？

Question

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

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

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

添加注释之前:

Before adding

添加注释后:

After adding

如何放置“添加注释!”将屏幕右下角的按钮锁定，即使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-native-action-button。它看起来很棒，同时您的问题将得到解决。这是 link .