magic_9527 magic_9527 - 6 days ago 7
iOS Question

How to range ScollView and Button in a row in react native?

I wanna to place a ScrollView and Button in a row, but It doesn't work, neither paddingLeft or width.

Without the Button the NaviScrollView will fill the hole view even I had set the width; with the Button and the Button will fill the hole view. Why?

export class Home extends Component {
render() {
return (
<View style={ styles.container }>
<NaviScrollView data= { fakeData }/>
<Button title="添加" color='gray' style={{right:0, width:20}}/>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
backgroundColor: 'red',
top: 20,
height: 44
},
})


class NaviScrollView extends Component {
render(){
return (
<ScrollView horizontal={true}>
{
this.props.data.map((item, index) =>
<Button key={ index } title={ item.title } onPress={ () => this._buttonPressed(item.title + item.url)}
color = 'black'/>)
}
</ScrollView>
);
}
}

Answer

Using style property : flexDirection : 'row' for View tag to organize childrens in a row or flexDirection : 'column' to organize childrens in a column.

I make a simple example base on your project. I didn't know its similar with your project or not but just take a look.

export default class Home extends Component {
  render(){
    return(
       <View style={ styles.container }>
          <ScrollView>
            <Text>ABC</Text>
            <Text>DEF</Text>
            <Text>GHI</Text>
            <Text>JKL</Text>
            <Text>NMO</Text>
          </ScrollView>
          <TouchableOpacity style={styles.press}>
            <Text>Press Me</Text>
          </TouchableOpacity>
        </View>
    );
  }
}
const styles = StyleSheet.create({
  button : {
    width : 50,
    height : 50
  },
  container: {
    flexDirection : 'row',
    backgroundColor: 'red',
    top: 20,
    height: 44
  },
  press: {
    width: 150,
    padding: 10,
    backgroundColor : 'yellow'
  }
})