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

Question

我是本机反应的新手，我正在尝试并排实现 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 style={{ flexDirection:"row" }}>
    <View style={styles.buttonStyle}>
        <Button>Button 1</Button>
    </View>
    <View style={styles.buttonStyle}>
        <Button>Button 2</Button>
    </View>
</View>

Answer 2

你只需要flexDirection: 'row'。请参考下面的编辑

<View style={styles.buttonStyleContainer}>
            <Button
             title={"Pause"}
             style={styles.buttonStyle}
             onPress={() => {
               this.setState({ paused: true });
             }}
              color="#841584"
            />
              <Button
                 title={"Play"}
                onPress={() => {
                this.setState({ paused: false });
             }}
             color="green"
           />

         </View>
         );
        }
       }
      const styles = StyleSheet.create({
         backgroundVideo: {
        position: "absolute",
        top: 0,
        left: 0,
        bottom: 0,
       right: 0
      },

    buttonStyleContainer: {
       flex: 1,
       flexDirection: 'row',
       marginHorizontal: 20,
        marginTop: 5,
      }
     });
     export default VideoPlayer;

Answer 3

试试看

<View style={{ flexDirection: "row" }}>
    <View style={styles.buttonStyle}>
        <Button title={"Button 11"}/>
        <Button title={"Button 12"}/>
    </View>
    <View style={styles.buttonStyle}>
        <Button title={"Button 21"}/>
        <Button title={"Button 22"}/>
    </View>
</View>