react-native - 我想要 2 个按钮并排 react 原生

Question

我是 native react 的新手，我正在尝试并排实现 2 个按钮我已经尝试过但我无法实现它，因为我已经插入了 2 个按钮它出现在另一个下面

这是我的代码:

      <View style={styles.buttonStyle}>
        <Button
         title={"Pause"}
         style={styles.buttonStyle}
         onPress={() => {
           this.setState({ paused: true });
         }}
          color="#841584"
        />
        </View>
         <View style={styles.buttonStyle}>
          <Button
             title={"Play"}
            onPress={() => {
            this.setState({ paused: false });
         }}
         color="green"
       />
      </View>
     </View>
     );
    }
   }
  const styles = StyleSheet.create({
     backgroundVideo: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
   right: 0
  },
 buttonStyle: {
    marginHorizontal: 20,
    marginTop: 5
  }
 });
 export default VideoPlayer;

Answer 1

定义渲染方向的属性称为 flexDirection，它可以设置为列(默认，垂直渲染项目)或行(水平渲染项目)。

因此，要达到所需的效果，您需要将样式属性 flexDirection:"row"添加到包含按钮的 View 中。您的代码如下所示:

<View style={{ flexDirection:"row" }}>
    <View style={styles.buttonStyle}>
        <Button>Button 1</Button>
    </View>
    <View style={styles.buttonStyle}>
        <Button>Button 2</Button>
    </View>
</View>