Кнопка React-Native 2, использующая тот же вид - PullRequest
Новая
       20

Кнопка React-Native 2, использующая тот же вид

0 голосов
/ 09 ноября 2018

Я не уверен, достаточно ли названия, чтобы выразить мой вопрос, вот что я хочу спросить.

В настоящее время я уже создаю 2 кнопки и вид, подобный этому изображению (2 кнопки, 1 вид):

2 buttons 1 view

Что я хочу сделать, так это то, что, когда я нажимаю кнопку Upcoming, в представлении будет отображаться некоторый текст (* Пусть, скажем, покажет "123"). Так что сделайте кнопку History, когда я нажму кнопку History, она покажет некоторый текст (в этом тексте пусть «qwe») в этом представлении.

Это мой код: 

class Booking extends Component {
    static navigationOptions = ({ navigation }) => {
        return {
            title: 'Booking',
            headerTintColor: 'white',
            headerBackTitle: 'Back',
            headerStyle: { backgroundColor: 'black' },
            headerRight: (
                <Button
                    onPress={() => {
                        navigation.navigate('Bnew');
                    }}
                    title='New'
                    color='white'
                    backgroundColor='black'
                />
            ),
        };
    };

    render() {
        return (
            <View style={styles.container}>
                <View style={styles.boohis}>
                    <Button
                        onPress={() => {
                            Alert.alert("", "Upcoming is Coming Soon!");
                        }}
                        title='Upcoming'
                        color='white'
                        backgroundColor='black'
                        style={{ width: 185, margin: 1 }}
                    />
                    <Button
                        onPress={() => {
                            Alert.alert("", "History is Coming Soon!");
                        }}
                        title='History'
                        color='white'
                        backgroundColor='black'
                        style={{ width: 185, margin: 1 }}
                    />
                </View>

                <View style={styles.container2}>

                </View>
            </View>
        )
    }
}

export default Booking;

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    scrollViewContainer: {
        flexGrow: 1,
    },
    boohis: {
        flexDirection: 'row',
        justifyContent: 'space-around'
    },
    container2: {
        flexGrow: 1,
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderColor: 'black',
        borderWidth: 2,
        margin: 1
    },
})

Как мне добиться этой части, используя 1 вид, используемый двумя кнопками?

1 Ответ

0 голосов
/ 09 ноября 2018

Есть два способа сделать это.

  1. Использование состояние 

    class Booking extends Component {
  constructor(props) {
    super(props);
      this.state = {
        selectedIndex: 0,
      };
    }

    render() {
      return (
        <View style={styles.container}>
          <View style={styles.boohis}>
            <Button
              onPress={() => {
                this.setState({selectedIndex: 0});
              }}
              title='Upcoming'
              color='white'
              backgroundColor='black'
              style={{ width: 185, margin: 1 }}
            />
            <Button
              onPress={() => {
                this.setState({selectedIndex: 1});
              }}
              title='History'
              color='white'
              backgroundColor='black'
              style={{ width: 185, margin: 1 }}
            />
          </View>
          {this.state.selectedIndex === 0 ? 
            <View style={styles.container2}>
              <Text>Page 1</Text>
            </View> : <View style={styles.container2}>
              <Text>Page 2</Text>
            </View>
          }
        </View>
      )
    }
  }
}
export default Booking;

  2. Использование createMaterialTopTabNavigator

...