テキストを縦に中央にするには？

Question

サンプルプロジェクト：私はTouchableOpacityコンポーネント内のテキストセンターを作るしようとしていますhttps://snack.expo.io/SyyO8XxbZ

は、私がlineHeightを使用しようとした：50しかし、私はちょうどそれを手動で設定する必要はありません。また、私はflex：1を使用しようとしていて、コンテントにjustifyContent： 'center'を入れようとしましたが、意図したレイアウトが壊れてしまいました。

助けてください！

import React, { Component } from 'react'; 
import { Text, View, TouchableOpacity} from 'react-native'; 

class Option extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     activeOption: this.props.options[0], 
    }; 
    } 
    updateActiveOption = (activeOption) => { 
    this.setState({ 
     activeOption, 
    }); 
    }; 
    render() { 
    return (
     <View 
     style={{ 
      flex: 1, 
      justifyContent: 'center', 
      flexDirection: 'row', 
      flexWrap: 'wrap', 
      marginTop:100 
     }} 
     > 
     {this.props.options.map((option) => (
      <TouchableOpacity 
      style={{ 
       margin: 5, 
       borderRadius: 5, 
       backgroundColor: this.state.activeOption === option ? 'lightgrey' : 'white', 
       borderWidth: 1, 
       borderColor: this.state.activeOption === option ? 'grey' : 'lightgrey', 
       overflow: 'hidden', 
       justifyContent: 'center',//can't work 
      }} 
      onPress={() => { 
       this.props.onChange(option); 
       this.updateActiveOption(option); 
      }} 
      > 
      <Text 
       style={{ 
       //lineHeight: 50, 
       textAlign: 'center', 
       width: 150, 
       height: 50, 
       color: 'black', 
       }} 
      > 
       {option} 
      </Text> 
      </TouchableOpacity> 
     ))} 
     </View> 
    ); 
    } 
} 

export default class App extends Component { 
    render() { 
    return (
     < Option 
     options={['A', 'B', 'C', 'D']} 
     onChange={(option) => { 
      console.log(option); 
     }}/> 
    ); 
    } 
} 

Answer 1

import React, { Component } from 'react'; 
import { Text, View, TouchableOpacity} from 'react-native'; 

class Option extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     activeOption: this.props.options[0], 
    }; 
    } 
    updateActiveOption = (activeOption) => { 
    this.setState({ 
     activeOption, 
    }); 
    }; 
    render() { 
    return (
     <View 
     style={{ 
      flex: 1, 
      justifyContent: 'center', 
      flexDirection: 'row', 
      flexWrap: 'wrap', 
      marginTop:100 
     }} 
     > 
     {this.props.options.map((option) => (
      <TouchableOpacity 
      style={{ 
       margin: 5, 
       borderRadius: 5, 
       backgroundColor: this.state.activeOption === option ? 'lightgrey' : 'white', 
       borderWidth: 1, 
       borderColor: this.state.activeOption === option ? 'grey' : 'lightgrey', 
       overflow: 'hidden', 
       height: 50, 
       justifyContent: 'center', 
      }} 
      onPress={() => { 
       this.props.onChange(option); 
       this.updateActiveOption(option); 
      }} 
      > 
      <Text 
       style={{ 
       //lineHeight: 50, 
       textAlign: 'center', 
       width: 150, 
       color: 'black', 
       }} 
      > 
       {option} 
      </Text> 
      </TouchableOpacity> 
     ))} 
     </View> 
    ); 
    } 
} 

export default class App extends Component { 
    render() { 
    return (
     < Option 
     options={['A', 'B', 'C', 'D']} 
     onChange={(option) => { 
      console.log(option); 
     }}/> 
    ); 
    } 
}