javascript - 我可以使用 react-native flex similiar 来引导行/列系统吗？

Question

像这样在 React Native 中使用 Flex 是个好主意吗？创建自己的组件来检索 Flex 值？我以前使用引导网格系统，现在我正在尝试学习 React Native。

有什么方法可以在堆栈上使用 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 后，我没有使用任何网格系统，而且我不觉得我错过了什么，每个屏幕的样式都是根据我对该屏幕的需要而设计的，以及尽可能重用组件的诅咒。