如何：Icon/Image 像在 Twitter 中一样不断出现在滚动部分？

Question

所以我想要一个类似推特的按钮或矢量图标，如下图所示：twitter button

所以这个概念就像这张图：concept

黑色矩形代表可滚动部分，它是基本的滚动视图。现在我想让 icon/picture 不断出现在所有这些部分，就像在 Twitter 中一样。在我的第二张照片中，那将是蓝色的星星。我还没有找到类似的概念。我如何在 React Native 中实现它？

Answer 1

您可以使用 native-base 和 react-native-paper 中可用的 Fab 按钮

[母语] https://docs.nativebase.io/Components.html#fabs-def-headref

[reac-native-paper]https://callstack.github.io/react-native-paper/fab.html

如果你想要不可触摸的自定义工厂，那么可以使用给定的代码

<View style={{position:'absolute', zIndex:99, bottom:15, right:15}}>
  <FontAwesome name="star" color={"blue"} size={25} />
</View>

如果你想要可触摸的定制工厂，那么可以使用给定的代码

<TouchableOpacity onPress={()=>/*submit code*/} style={{position:'absolute', zIndex:99, bottom:15, right:15}}>
  <FontAwesome name="star" color={"blue"} size={25} />
</TouchableOpacity>

Answer 2

您可以尝试这样的操作：


import React, { PureComponent } from 'react'
import { View, ScrollView } from 'react-native'

export default class Example extends PureComponent {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <ScrollView>
                    {/* Children */}
                </ScrollView>
                <TouchableOpacity
                    activeOpacity={0.6}
                    style={{
                        position: 'absolute',
                        right: 20,
                        bottom: 60
                    }}
                    // onPress={this.onAddPress}
                >
                    {/* Provide icon source here */}
                    <Image source={iconSource} />
                </TouchableOpacity>
            </View>
        )
    }
}

如果您需要将此底部图片显示在每个屏幕上，那么您可以将此 TouchableOpacity 组件放置在所有这些屏幕上，但放在 ScrollView.

之外

如何：Icon/Image 像在 Twitter 中一样不断出现在滚动部分？

How to: Icon/Image constantly appear over scroll-sections like in twitter?

javascript

twitter

button

react-native