Question

我想连续放置 ScrollView 和按钮，但它不起作用， paddingLeft 或宽度

如果没有按钮， NaviScrollView 将填充孔视图，即使我已设置宽度;使用按钮和按钮将填充孔视图。为什么呢？

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 1

使用样式属性：flexDirection : 'row'用于View标记以连续组织子项，或flexDirection : 'column'组织列中的子项。

我根据你的项目做了一个简单的例子。我不知道它与你的项目有什么相似之处，只是看一看。

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'
  }
})

如何在反应原生中连续调整ScollView和Button的范围？

1 个答案: