响应本机样式：ScrollView仅垂直滚动，按钮停留在屏幕底部

问题描述

如何设置本机屏幕的样式？示例代码和模拟可以在下面找到。

一些具体问题：

1. 如何将React Native ScrollView设置为仅垂直滚动？它里面的图像对我来说是个问题，它会扩大面板的宽度并自动激活水平滚动。我似乎无法禁用它。
2. 底部的按钮可能会覆盖长文本滚动到结尾。

除了“本机”之外，没有第三方库。

<View style={styles.Container}>
  <ScrollView style={styles.Panel}>
    <Text>some Header</Text>
    <Image source={require('path/to/some/image')} />
    <Text>some text</Text>
    <Text>more text</Text>
    <Text>more text</Text>
    <Text>more text</Text>
    <Text>more text</Text>
  </ScrollView>
  <View style={styles.Buttons}>
    <Button style={styles.Button} onPress={onPressNext} title="next" />
    <Button style={styles.Button} onPress={onPressPrevious} title="previous" />
    {* could add more buttons here *}
  </View>
</View>

export const styles = StyleSheet.create({
  Container: { flex:1 },Panel: { 
    // scrollable but only vertically
    // content here shouldn't be covered by bottom buttons
  },Buttons: { 
    // have dynamic height depends on number of buttons inside
    // always stay at bottom of screen
  },Button: { height:80 }
})

解决方法

1-您可以通过禁用溢出来禁用水平滚动，我建议为图像设置maxWidth，这样它就不会显示为裁剪

<ImageContainer style={{flexWrap: 'wrap'}}/>

2-将屏幕内容分为2个视图，一个视其子菜单（按钮容器）的内容而展开，另一个视屏将通过flex（scrollview）填充剩余空间

<Screen>
<ScrollContentContainer style={{flex:1}} />
<ButtonsContainer />
</Screen>