Question

这个好主意是否像这样使用flex in native？创建自己的组件来反转flex值？之前我正在使用bootstrap网格系统，现在我正在尝试学习反应原生。

有没有办法在堆栈上使用react-native bootstrap显示这个示例？

let FlexContainer = ({direction,children}) =>{
  console.log(direction)
  var style = {
  
    flexDirection:direction || 'row',
    display:'flex',
    width:'100%',
    height:'100%'
  
  }
  return(<div style={style}>{children}</div>)

}

let FlexBox = ({val, color, children}) => {

  return (
    <div style={{backgroundColor:color, flex:val}}>{children}</div>
  )

}




class LayoutExample extends React.Component {

  constructor(props){
    super(props)
  }
  
  render(){
  
    return(
    <div className='screen'>
      <FlexContainer>
        <FlexBox val={1} />
        <FlexBox color="blue" val={1} />
        <FlexBox color="red" val={1} />
      </FlexContainer>
    </div>
    )
    
  
  }

}

ReactDOM.render(<LayoutExample />,document.getElementById('example'))

.screen {

  width:400px;
  height:300px;
  border:2px solid black;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>

<div id="example"></div>

这种方法有效吗？

Answer 1

这是有效的，但在我看来，尽可能将风格考虑与逻辑分开是更好的。

我以前也曾经使用过bootstrap，但是因为我开始反应原生，我没有使用任何网格系统而且我没有感觉我错过了什么，每个屏幕我根据我的风格需要从该屏幕和诅咒尝试尽可能多地重用组件。

我可以使用与本地行/列系统类似的react-native flex吗？

1 个答案: