Я хочу, чтобы 2 кнопки бок о бок реагировали на родную - PullRequest
Новая
       12

Я хочу, чтобы 2 кнопки бок о бок реагировали на родную

0 голосов
/ 18 марта 2019

Я новичок, чтобы реагировать на родную, и я пытаюсь добиться 2 кнопок рядом Я попробовал это, и я не мог добиться этого, так как я уже вставил 2 кнопки, они отображаются одна под другой

Вот мой код: 

      <View style={styles.buttonStyle}>
        <Button
         title={"Pause"}
         style={styles.buttonStyle}
         onPress={() => {
           this.setState({ paused: true });
         }}
          color="#841584"
        />
        </View>
         <View style={styles.buttonStyle}>
          <Button
             title={"Play"}
            onPress={() => {
            this.setState({ paused: false });
         }}
         color="green"
       />
      </View>
     </View>
     );
    }
   }
  const styles = StyleSheet.create({
     backgroundVideo: {
    position: "absolute",
    top: 0,
    left: 0,
    bottom: 0,
   right: 0
  },
 buttonStyle: {
    marginHorizontal: 20,
    marginTop: 5
  }
 });
 export default VideoPlayer;

Ответы [ 2 ]

0 голосов
/ 18 марта 2019

Свойство, которое определяет направление рендеринга, называется flexDirection, его можно установить в столбец (по умолчанию, элементы рендеринга по вертикали) или строки (элементы рендеринга по горизонтали).

Поэтому для достижения желаемого эффекта вам необходимо добавитьсвойство стиля flexDirection: «строка» в представлении, содержащем кнопки.Ваш код будет выглядеть примерно так: 

<View style={{ flexDirection:"row" }}>
    <View style={styles.buttonStyle}>
        <Button>Button 1</Button>
    </View>
    <View style={styles.buttonStyle}>
        <Button>Button 2</Button>
    </View>
</View>
0 голосов
/ 18 марта 2019

Вам просто нужно flexDirection: 'row' .Пожалуйста, обратитесь ниже редактировать 

<View style={styles.buttonStyleContainer}>
            <Button
             title={"Pause"}
             style={styles.buttonStyle}
             onPress={() => {
               this.setState({ paused: true });
             }}
              color="#841584"
            />
              <Button
                 title={"Play"}
                onPress={() => {
                this.setState({ paused: false });
             }}
             color="green"
           />

         </View>
         );
        }
       }
      const styles = StyleSheet.create({
         backgroundVideo: {
        position: "absolute",
        top: 0,
        left: 0,
        bottom: 0,
       right: 0
      },

    buttonStyleContainer: {
       flex: 1,
       flexDirection: 'row',
       marginHorizontal: 20,
        marginTop: 5,
      }
     });
     export default VideoPlayer;
...