Question

我试图将一个项目放在另一个项目的右侧，但它总是停留在第一个项目的底部，如下所示：

所以，现在我只是试图放置＆＃34; TEST＆＃34;该旁边菜单旁边的文字。

这是我的代码：

<View style = {{flex: 1, width: Dimensions.get('window').width,
        height: Dimensions.get('window').height}}>

          <Workspace 
            img={require('./images/quarto.png')}/>

          <ScrollView>
            <Header>
              <HeaderItem img={require('./images/camera.png')}/>
              <HeaderItem img={require('./images/camera.png')}/>
              <HeaderItem img={require('./images/camera.png')}/>
              <HeaderItem img={require('./images/camera.png')}/>
            </Header>
          </ScrollView>

          <ScrollView style = {{flexDirection: 'row'}}>
            {this.sideMenuShow()}
            <ScrollView style = {{alignSelf: 'flex-end'}}>
            <Text style = {{color: 'white'}}>TEST</Text>
            </ScrollView>
          </ScrollView>

          <Footer>
            <View style = {styles.logoContainerStyle}>
              <Image
                style = {styles.logoStyle}
                source = {require('./images/magicalStage.png')}
                />
            </View>
            <View 
            style = {{width: '70%', flexDirection: 'row', justifyContent:'flex-end', alignItems: 'flex-end'}}>
              <TouchableOpacity>
                <Text style = {{color: 'white'}}>Workspace  </Text>
              </TouchableOpacity>
              <TouchableOpacity>
                <Text style = {{color: 'white', textAlign: 'right'}}>Catalogue</Text>
              </TouchableOpacity>
            </View>
          </Footer>
        </View>

如果有帮助，侧面菜单代码为：

sideMenuShow() {
  const furnitureList = <FurnitureList />;

     if(!this.state.hideMenu) {

        return(
        <SideMenu> 
          <MenuButton
          source = {require('./images/left-material.png')}
          onPress = {() => this.setState({hideMenu: true})}/>
          <Text style = {{color: 'white', fontSize: 16, fontWeight: 'bold'}}>Furniture</Text>

            <SideMenuItem 
              onPress = {() =>
                !this.state.hideList ?
                this.setState({hideList: true, hideListSofa: false, hideListBoxes: false})
                : this.setState({hideList: false})

                }
              text='Test'
              >
              </SideMenuItem>
              {
              this.state.hideList ? 
              <FurnitureList
              source = {require('./images/image.png')}/>
              : null
              }
        </SideMenu>
        );

       }
     else {
         return(
          <SmallSideMenu> 
            <MenuButton 
            source = {require('./images/right-material.png')}
            onPress = {() => this.setState({hideMenu: false})}/>
          </SmallSideMenu>
         );
     }
 }

我以为我可以通过设置ScrollView的flexDirection将两个项目包装到＆＃39; row＆＃39;来获得我想要的东西，但它没有像我想象的那样工作。任何帮助都会很棒！

提前致谢！

Answer 1

您将<Text style = {{color: 'white'}}>TEST</Text>组件放在ScrollView中。

尝试将contentContainerStyle={{ flexDirection: 'row'}}添加到父ScrollView，或者只删除父ScrollView。希望它有所帮助。

Answer 2

上面答案中提到的

{ flexDirection: 'row' }。

您需要将此应用到父级。

例如：假设您的HTML等效项如下所示：

<div class='parent'>
  <div class='child1'></div>
  <div class='child2'></div>
</div>

然后您必须将flexDirection: 'row'应用于'parent'而非'child'

这将使child1和child2在同一行中水平并排渲染。

React Native - 并排放置两个项目

2 个答案: