React Native - проблема с flexDirection

Question

Я пытаюсь поместить кнопку (пользовательский компонент, созданный из TouchableOpacity внутри представления) и изображение в представлении ..... и расположить их рядом.
См. Код ниже

<View
  style={{
    borderColor: 'black',
    borderWidth: 1,
    flex: 1,
    flexDirection: 'row',
  }}
>
  <MyButton
    to_extraStyle={{
      backgroundColor: '#03A9F4',
      width: 100,
      height: 60,
      alignSelf: 'flex-start',
    }}
    onPress={this._imagePickHandler}
  >
    CHOOSE PIC
  </MyButton>
  <Image
    source={{ uri: this.state.localImgUrl }}
    style={{
      width: 100,
      height: 60,
      borderColor: 'black',
      borderWidth: 1,
      alignSelf: 'flex-end',
    }}
  />
</View>

Когда я удаляю flexDirection: 'row', вы можете видеть и изображение, и кнопку .... они располагаются друг на друге .... но с включенным flexDirection: 'row' изображение исчезает, и вы можете видеть только кнопку.

Есть идеи?

Answer 1

Используйте значение ширины как %.

<View
  style={{
    borderColor: 'black',
    borderWidth: 1,
    flex: 1,
    flexDirection: 'row'
  }}
>
  <MyButton
    to_extraStyle={{
      backgroundColor: '#03A9F4',
      width: "50%",
      height: 60,
    }}
    onPress={this._imagePickHandler}
  >
    CHOOSE PIC
  </MyButton>
  <Image
    source={{ uri: this.state.localImgUrl }}
    style={{
      width: "50%",
      height: 60,
      borderColor: 'black',
      borderWidth: 1,
    }}
  />
</View>

Пример

export default class App extends Component {
  render() {
    return (
      <View style={s.container}
>
 <TouchableOpacity style={s.touchable}>
      <Text style={{color:"#ffffff"}}>Button </Text>
 </TouchableOpacity>
      <Image source={{uri: 'http://i.imgur.com/IGlBYaC.jpg'}} style={s.backgroundImage} />
      </View>
    );
  }
}

const s = StyleSheet.create({
  backgroundImage: {
      width: "50%",
      height: 60,
      borderColor: 'black',
      borderWidth: 1,
  },
  touchable: {      
   backgroundColor: '#03A9F4',
      width: "50%",
      height: 60,
      justifyContent:"center",
      alignItems:"center"
      },
  container: {
    borderColor: 'white',
    borderWidth: 1,
    flex: 1,
    flexDirection: 'row'
  }
});

Answer 2

Удалите alignSelf на MyButton и Image, и они будут располагаться рядом.

Если то, что вы хотели получить с помощью alignSelf, это выровнять MyButton по левому краюи Image справа, затем добавьте justifyContent: 'space-between' к вашему виду.