React native react原生样式：ScrollView仅垂直滚动，按钮停留在屏幕底部

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

一些具体问题：

如何将React Native

ScrollView

设置为仅垂直滚动？它里面的图像对我来说是个问题，它会扩展面板的宽度并自动激活水平滚动。我似乎无法禁用它

底部的按钮可以覆盖滚动到末尾的长文本

首选react native以外的第三方库

<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 }
})

某个标题
一些文本
更多文本
更多文本
更多文本
更多文本
{*可以在此处添加更多按钮*}
export const styles=StyleSheet.create({
容器：{flex:1}，
小组：{
//可滚动，但只能垂直滚动
//底部按钮不应覆盖此处的内容
},
按钮：{
//动态高度取决于内部按钮的数量
//始终保持在屏幕底部
},
按钮：{高度：80}
})

---

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

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

2-将屏幕内容分为两个视图，一个视图根据其子视图（按钮容器）的内容展开，另一个视图使用flex（scrollview）填充剩余空间

---

不完全是我所希望的，但“设置maxWidth”是一个很好的解决方案！非常感谢。

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