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：'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 2

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

因此，要获得所需的效果，您需要将样式属性flexDirection：“ row”添加到包含按钮的视图中。您的代码如下所示：

declare @asdf varchar(100) = '#Hello world! Need to #filter the #tag'

select *
from dbo.DelimitedSplit8K(@asdf, ' ')
where Item like '#%'

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>

我想在本机中并排放置两个按钮

3 个答案: